SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    Zero Point Zero Siebird's Avatar
    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 &amp; Commercial Products">Architectural &amp; 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">&nbsp;</div>
    		</div>
    CSS:
    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">&nbsp;</div>
    		</div>
    CSS:
    Code CSS:
    #quicklinks {
    	position: relative;
    	margin: 0;
    	padding: 0;
    	width: 100&#37;;
    	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}

  2. #2
    SitePoint Addict Trent Reimer's Avatar
    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">

  3. #3
    SitePoint Addict Trent Reimer's Avatar
    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;
    }

  4. #4
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Trent Reimer View Post
    Internet Explorer is a wonderful browser for displaying pages authored in 1998.
    Wish it wasn't as popular as it is.

    Anyways...I removed the white space, and added no margin/padding to the "clear" divs. No success

    Code CSS:
    .clear {clear: both; height: 0px; margin: 0; padding: 0}

  5. #5
    SitePoint Addict Trent Reimer's Avatar
    Join Date
    Sep 2005
    Location
    Canada
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry about the whitespace then, false lead.

  6. #6
    SitePoint Addict Trent Reimer's Avatar
    Join Date
    Sep 2005
    Location
    Canada
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by asiewe61 View Post
    Anyways...I removed the white space, and added no margin/padding to the "clear" divs. No success

    Code CSS:
    .clear {clear: both; height: 0px; margin: 0; padding: 0}
    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.

  7. #7
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Trent Reimer View Post
    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.
    I gave that a shot, and that didn't seem to work either, I had to keep the empty clear dive in my quicklinks as it caused the footer to sit right under the #billboard. Thanks for trying though. Anyone else have any ideas why IE6 is creating these margins?

  8. #8
    SitePoint Guru james_littler's Avatar
    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

  9. #9
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by james_littler View Post
    zero all margins and padding should be the first thing in your css...

    *{padding:0px; margin:0px}
    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;
    }

  10. #10
    SitePoint Wizard bronze trophy Centauri's Avatar
    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.

  11. #11
    Zero Point Zero Siebird's Avatar
    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

  12. #12
    SitePoint Wizard bronze trophy Centauri's Avatar
    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.

  13. #13
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Centauri View Post
    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.
    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}

  14. #14
    Zero Point Zero Siebird's Avatar
    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 &ndash; 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>
    CSS:
    Code CSS:
    .clear {clear: both; height: 0px; margin: 0; padding: 0}

  15. #15
    SitePoint Addict richtestani's Avatar
    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

  16. #16
    SitePoint Wizard bronze trophy Centauri's Avatar
    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.

  17. #17
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Centauri View Post
    overflow:hidden applied to the .clear class style will fix that.
    Money!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •