UGN Security Forums
My ProfileMember DirectoryLogin
Search our ForumsView our FAQView our Site Rules
View our CalendarView our Active TopicsGo to our Main Page

UGN Security Store
 

Network Sites UGN Security, The GoNix Initiative, Elite Web Gamers, Back of the Web, EveryDay Helper, VNC Web Design & Development
September
Su M Tu W Th F Sa
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
Sponsored Links
Latest Postings
The History Thread...
by Gremelin
Yesterday at 09:42 AM
Doom 3
by Cyrez
09/11/14 08:58 PM
Amazon Gift Card Generator/KeyGen?te
by Gecko666
08/22/14 09:21 AM
Latest Reviews
Topic Options
Rate This Topic
#46253 - 07/17/08 02:59 PM question about IE and CSS
Shinobi Offline
UGN Member

Registered: 09/25/02
Posts: 390
Loc: Asheville, NC
I'm just going to C&P my post from IE forums, and if anyone has a definitive answer as to why and/or how to correct the problem, lemme know. Other then that any thoughts are appreciated.


I am currently doing a website http://www.wcshootfighting.com and I was having some problems with the #lines section

When I coded the section I specified a height of 2px width of 100% and used a background image that was 1pixel x 1pixel

When I previewed the page in Firefox it came out as it should, a 2pixel like spanning the length of the page. However when previewing in IE the line was considerably larger than 2px. My initial thought was for some reason IE was rendering the size of the pixels to the much larger than Firefox maybe? However the only solution I could come up with was to create overlay layers that were 2px below where the #lines started to cover the excess.

I would like to know why the line is so much bigger in IE, and why it ignores my height specifications and comes up with something completely different, and if there is an easier way to correct this (for future reference) other than creating new layers to cover up what shouldn't be there anyway.

You can view the code by going to the source of http://www.wcshootfighting.com all the CSS is contained on that page.

I have also included the code below:

/this overlays the top line/
#nav {
float:left;
position:absolute;
background-image:url(images/midline.jpg);
height:46px;
width: 100%;
top:74px;
z-index:2;
}
/this is the bottom line/
#lines2 {
position: absolute;
height: 2px;
background-image:url(images/bottomline.jpg);
width:100%;
z-index:1;
top:120px;
}
/overlay for the bottom line/
#ieoverlay {
position: absolute;
height: 50px;
background-color[:#]FFFFFF;
width:100%;
z-index:2;
top:122px;
}
/top line/
#lines {
position: absolute;
height: 2px;
background-image:url(images/bottomline.jpg);
width:100%;
z-index:1;
top:72px;
}
_________________________
"The secret to creativity is knowing how to hide your sources."
-Albert Einstein

Tech Ninja Security

Top
Sponsored Links
      
#46256 - 07/17/08 08:28 PM Re: question about IE and CSS [Re: Shinobi]
Gremelin Online   shocked

Community Owner
*****

Registered: 02/28/02
Posts: 7193
Loc: Portland, OR; USA
The page looks the same in IE and FFox to me... If I could figure it out I could probably give you a pure css approach vs using an image at all in the first place wink...
_________________________
Donate to UGN Security here.
UGN Security, Back of the Web, Elite Web Gamers & VNC Web Design Owner

Top
#46373 - 08/04/08 05:51 PM Re: question about IE and CSS [Re: Gremelin]
§intå× Offline


*****

Registered: 12/03/02
Posts: 3255
Loc: Maryland
I hate IE with a passion when it comes to CSS. 5.5, 6, 7, and coming very soon 8 all seem to render css different. 8 at least is supposed to have a standards compliant mode. Yea, we shall see.

I know there is a border line type issue that can get you up to 2 px more than you wanted in FF. say you have a box

Code:
+-------+
|       |
|       |
|       |
+-------+


FF will render from within the borders the num of pixels you want.

Code:
+-------+
|  ^    |
|< +    |
|       |
+-------+

arrows pointing to the inside edge of our div container



In IE, they of course like to think different, ~*cough RETARDS*~ So they render from outside the object border (even if their is no border)
Code:
   +-------+
   |       |
  >|       |
   |       |
   +-------+
       ^
arrows pointing from outside into 
the inside of our div container.


This small difference can add up to 2 px difference in many layouts if not accounted for. 2px is huge. Often a work around to have cross browser compatibility is to wrap the div inside a div. Set the height width and it forces what you would expect.


Edited by §intå× (08/04/08 05:51 PM)
_________________________
My New site OpenEyes

Top

Moderator:  §intå×, Gremelin 
Featured Member
Registered: 02/28/02
Posts: 7193
Forum Stats
2148 Members
46 Forums
34481 Topics
69651 Posts

Max Online: 1567 @ 04/25/10 02:20 AM
Top Posters
UGN Security 27643
Gremelin 7193
§intå× 3255
SilentRage 1273
Ice 1146
pergesu 1136
Infinite 1041
jonconley 955
Girlie 908
unreal 860
Newest Members
Tim050, Gecko666, defghi795767, Devo60, ali
2148 Registered Users
Who's Online
1 registered (Gremelin), 276 Guests and 367 Spiders online.
Key: Admin, Global Mod, Mod
Latest News


Donate
  Get Firefox!
Get FireFox!