SitePoint Sponsor |
|
User Tag List
Results 1 to 17 of 17
Thread: Arrrgh...cant stand IE6...
-
Sep 25, 2007, 12:43 #1
- Join Date
- Feb 2007
- Location
- York, PA
- Posts
- 456
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Arrrgh...cant stand IE6...
My site is dispaying properly in IE7, FF, and Safari(except search bar). I have 3 issues in IE6 that cause the page to blow up. The Horizontal Navigation at the top looks like it has extra margin/padding to it? Take a look, markup is below:
Code HTML4Strict:<div id="globalheader"> <ul id="globalnav"> <li id="nav_about"><a href="#" title="Who is Fabral?">About</a></li> <li id="nav_residential"><a href="#" title="Residential Products">Residential</a></li> <li id="nav_postframe"><a href="#" title="Post Frame Products">Post Frame</a></li> <li id="nav_archcomm"><a href="#" title="Architectural & Commercial Products">Architectural & Commercial</a></li> <li id="nav_colorvis"><a href="#" title="Stylize Your Building of Choice">Color Visualizer</a></li> <li id="nav_tech"><a href="#" title="Need Technical Specifications?">Technical</a></li> <li id="nav_news"><a href="#" title="Latest Headlines From Fabral">News</a></li> <li id="nav_corpinfo"><a href="#" title="Information On The Company">Corporate Information</a></li> </ul> ....</div>
CSS
Code CSS:#globalheader { position: relative; margin: 0; padding: 0; width: 846px; height: 31px; background: url(../layout/bg-globalheader.jpg) no-repeat bottom; } #globalnav { position: relative; height: 25px; width: 598px; padding: 0; margin: 0; float: left; background: url(../layout/bg-globalnav.gif) repeat-x; } #globalnav ul, #globalnav li { margin: 0; padding: 0; height: 48px; float: left; width: auto; list-style-type: none; display: inline; text-indent: -9000px; } #globalnav li a { margin: 0; padding: 0; display: block; width: auto; height: 25px; overflow: hidden; text-decoration: none; background-repeat: no-repeat; }
Next issue, the Billboard seems to have the same problem:
Code HTML4Strict:<div id="billboard"> <h2 id="ad_postframe"><a href="#" title="Post Frame">Post Frame</a></h2> <h2 id="ad_residential"><a href="#" title="Residential">Residential</a></h2> <h2 id="ad_archcomm"><a href="#" title="Architectural/Commercial">Architectural/Commercial</a></h2> <div class="clear"> </div> </div>
Code CSS:#billboard { position: relative; margin: 2px; width: 838px; height: 323px; background: #FFF; border: 2px solid #333; } #billboard h2 {text-indent: -9000px} #ad_postframe { position: relative; display: block; margin: 2px 0 2px 2px; float: left; width: 277px; height: 319px; background: url(../layout/billboard-postframe.jpg) no-repeat; } #ad_residential { position: relative; margin: 2px 2px 2px 2px; float: left; width: 277px; height: 319px; background: url(../layout/billboard-residential.jpg) no-repeat; } #ad_archcomm { position: relative; margin: 2px 2px 2px 0; float: right; width: 276px; height: 319px; background: url(../layout/billboard-archcomm.jpg) no-repeat; } #billboard a { margin: 0; padding: 0; display: block; width: 276px; height: 319px; background-position: 10px top; background-repeat: no-repeat; }
And finally, a when I added a margin to <ul> <li> in #quicknews, it pushed the H3 headings over a tad???
Code HTML4Strict:<div id="quicklinks"> <div id="quicknews"> <h3 title="News">News</h3> <ul> <li>... <ul> <li>....<ul class="readmore"><li>...</a></li></ul></li></ul></li> </ul> </div> <div id="quicksearch"> <h3 title="Dealer Search">Dealer Search</h3> </div> <div id="quickstar"> <h3 title="Energry Star">Energy Star</h3> </div> <div id="quicktax"> <h3 title="Tax Savings">Tax Savings</h3> </div> <div class="clear"> </div> </div>
Code CSS:#quicklinks { position: relative; margin: 0; padding: 0; width: 100%; height: auto; background: url(../layout/bg-quicklinks.gif) repeat-y } #quicklinks h3 {margin: 0;height: 30px;text-indent: -9000px;} #quicklinks ul li { margin: 0 5px 0 12px; padding: 0; font-size: .8em; color: #000; list-style-type: none; } #quicklinks ul li a { color: #00336F} #quicklinks ul li a:hover { color: #FFF; text-decoration: none; background: #00336F} #quicklinks ul li ul li { margin: 0 0 0 15px; padding: 0; font-size: .8em; color: #000; list-style-type: square; } #quicklinks ul li ul li ul li {margin: 0 0 0 -20px; width: 69px; height: 16px; list-style-type: none}
-
Sep 25, 2007, 13:28 #2
- Join Date
- Sep 2005
- Location
- Canada
- Posts
- 228
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Internet Explorer is a wonderful browser for displaying pages authored in 1998.
What happens if you remove all surrounding whitespace characters in the nested block elements? e.g.
Code HTML4Strict:<div id="globalheader"><ul id="globalnav">
-
Sep 25, 2007, 13:37 #3
- Join Date
- Sep 2005
- Location
- Canada
- Posts
- 228
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I see the "clear" divs are taking up space.
If you remove those empty divs and clear the elements directly you may get better results.
Code css:#globalheader { clear: both; } #billboard { clear: both; } #quicklinks { clear: both; }
-
Sep 25, 2007, 13:43 #4
- Join Date
- Feb 2007
- Location
- York, PA
- Posts
- 456
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Sep 25, 2007, 13:49 #5
- Join Date
- Sep 2005
- Location
- Canada
- Posts
- 228
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Sorry about the whitespace then, false lead.
-
Sep 25, 2007, 13:53 #6
- Join Date
- Sep 2005
- Location
- Canada
- Posts
- 228
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Actually you should be able to get rid of the "clear" divs altogether since IE6 seems to display them its own way rather than letting you specify a zero height, etc. I have gone back and edited my post so it includes a small example now where the "clear" attribute is added to the block elements directly.
-
Sep 26, 2007, 06:14 #7
- Join Date
- Feb 2007
- Location
- York, PA
- Posts
- 456
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Sep 26, 2007, 07:53 #8
- Join Date
- May 2007
- Location
- Portsmouth, UK
- Posts
- 775
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
zero all margins and padding should be the first thing in your css...
*{padding:0px; margin:0px}
that needs to be before everything else and will set the browsers margins and padding to 0 all browsers have different defalts
that should give you a solid and reliable foundation on which to build
-
Sep 26, 2007, 08:21 #9
- Join Date
- Feb 2007
- Location
- York, PA
- Posts
- 456
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I have done something similar to this, I have an initial.css file that neutralizes key elements:
Code CSS:/* =INITIAL v2.1, by Faruk Ates - [url]www.kurafire.net[/url] Addendum by Robert Nyman - [url]www.robertnyman.com[/url] Addition by Christian Montoya - [url]www.christianmontoya.net[/url] */ /* Neutralize styling: Elements we want to clean out entirely: */ html, body, form, fieldset { margin: 0; padding: 0; font: 100%/120% "Times New Roman", Georgia, Verdana, Arial, Helvetica, sans-serif; } /* Neutralize styling: Elements with a vertical margin: */ h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address { margin: 1em 0; padding: 0; } /* Apply left margin: Only to the few elements that need it: */ li, dd, blockquote { margin-left: 1em; } /* Miscellaneous conveniences: */ form label { cursor: pointer; } fieldset { border: none; } p, li, blockquote, input, select, textarea, th, td { font-size: 1em; }
-
Sep 26, 2007, 08:39 #10
- Join Date
- May 2007
- Location
- Newcastle, Australia
- Posts
- 3,718
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Regarding the billboard h2's - anything that is floated and has a margin should have set an inline display, otherwise IE6 will double the margin is the margin is against a solid object. The ad_postframe h2 is too far right in IE6, therefore the total width does not fit. Give the billboard h2's inline display.
IE6 has stupid margin problems at times, and it is quite often better to apply padding instead of margins. Remove the quicklinks ul margin and play around with padding instead.
Some of the navigation space is due to the globalnav ul and li having a height of 48px instead of 25px - IE will expand the conatiner to suit. Not sure about the space above the navbar - my IE Web Accessibility Toolbar doesn't like your linking the other stylesheets from the main one, so I can't really see what styles IE is actually applying to elements.
-
Sep 26, 2007, 09:14 #11
- Join Date
- Feb 2007
- Location
- York, PA
- Posts
- 456
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks Centauri! Putting the h2 to display: inline fixed the margin/padding issues in the #billboard div, I never knew that!. The horizontal nav I switched the height of 48px to 25px on the #globalnav, but I still have margin/padding issues above, not quite sure why thats adding space in IE6. Is it better to import CSS files from a master, or have them imported in <head> tag?
As far as the #quicklinks, I removed the margin, and added padding, and played around with it, but the padding also pushes the h3 over. If I remove the margin/padding, IE6 displays correctly, but the unordered list lay on the border, not in the faux bg. Any other ideas/suggestions that could fix this?
Again, Thanks for all the help
-
Sep 26, 2007, 09:21 #12
- Join Date
- May 2007
- Location
- Newcastle, Australia
- Posts
- 3,718
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Padding on the ul or li elements themselves of no use?
If the style sheets are linked one after the other from the html page instead of from the master css file, then my toobar would be able to show what styles are being applied, and may make tracking a little easier.
-
Sep 26, 2007, 10:36 #13
- Join Date
- Feb 2007
- Location
- York, PA
- Posts
- 456
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I moved all the style sheets to the <head> for you or anyone that wants to debug.
As far as the padding on the ul or li's, I only played around with the #quicklinks ul li, I didnt mess with the nested lists as when I added margin/padding to this, it caused the layout to break:
Code CSS:#quicklinks ul li { margin: 0; padding: 0 5px 0 12px; ul font-size: .8em; color: #000; list-style-type: none; } #quicklinks ul li a { color: #00336F} #quicklinks ul li a:hover { color: #FFF; text-decoration: none; background: #00336F} #quicklinks ul li ul li { margin: 0 0 0 15px; padding: 0; font-size: .8em; color: #000; list-style-type: none; } #quicklinks ul li ul li ul li {margin: 0 0 0 -20px; width: 69px; height: 16px; list-style-type: none}
-
Sep 26, 2007, 12:54 #14
- Join Date
- Feb 2007
- Location
- York, PA
- Posts
- 456
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I got it working in IE6 finally. I did what you said Centauri and messed with the <ul> and <li> margin/padding, and broke it down into two seperate styles, at first I had #quicklinks ul, #quicklinks li {} together whiched seemed to be adding double. I then removed them from each other and applied margin/padding to their respective values.
I downloaded the IE web dev toolbar and did some debugging myself. IE6 is showing the empty clear div, with a hasLayout = -1, not sure what that means?
Code HTML4Strict:<div id="header"> <h1 id="logo">Fabral – Metal Wall and Roof Systems</h1> <ul id="header_nav"> <li><a href="#" title="Home">Home</a></li> <li><a href="#" title="Contact">Contact</a></li> <li><a href="#" title="Frequently Asked Questions">F.A.Q</a></li> </ul> <div class="clear"></div> </div>
Code CSS:.clear {clear: both; height: 0px; margin: 0; padding: 0}
-
Sep 26, 2007, 16:37 #15
- Join Date
- Nov 2003
- Location
- Bridgeport
- Posts
- 292
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
One thing I've learned is IE6 loves lists displayed as inline when you apply any sort of padding,line-height to it. IE also works works well when you float your lists, you just need to clear more often in your layouts.
RichTestani
-------------------------------
http://www.junkdepot.com
http://www.rareoopdvds.com | The Movie Poster Site
-
Sep 26, 2007, 17:30 #16
- Join Date
- May 2007
- Location
- Newcastle, Australia
- Posts
- 3,718
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ahh - I had missed that clearing div - IE6 will not allow a div to collapse to less height than the current text size. For small divs, setting text height to 1px works, but if you want no height, then overflow:hidden applied to the .clear class style will fix that.
-
Sep 27, 2007, 05:31 #17
- Join Date
- Feb 2007
- Location
- York, PA
- Posts
- 456
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Bookmarks