SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Guru mdumka's Avatar
    Join Date
    Jul 2003
    Location
    True North
    Posts
    642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wierd Problem In IE

    Hi Guys,

    Having a problem with IE, I have a 3 Column layout, working fine but my page changes when I hover my naviagtion link. The bottom of the page vanishes.

    Sounds weird but I have not seen it before.

    basefront.no-ip.com/stillwater/new

    Stylesheet:
    Code:
    body {
    	margin:0px 0px 0px 0px;
    	padding:0px 0px 0px 0px;
    	background-color:#CCCCCC; 
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:11px;
    }
    #wrap {
    	width:700px;
    	margin:5px 5px 5px 5px;
    	background-color:#FFFFFF;
    	border:1px solid #000000;
    }
    #clearfooter {
    	clear:both;
    	height:0px;
    	overflow:hidden;
    }
    #left {
    	float:left;
    	width:150px;
    }
    #main {
    	position:relative;
    	margin-left:150px;
    }
    #right {
    	float:right;
    	width:150px;
    	text-align:center;
    	background-color:#00FF00;
    }
    #content {
    	padding:5px 5px 5px 5px;
    	margin-right:150px;
    	text-align:left;
    	background-color:#00CCFF;
    }
    /* Navigation Classes */
    .navigation_container {
    	background-color:#F0F0F0;
    	border:1px solid #CCCCCC;
    	padding:2px 2px 2px 2px;
    	margin: 0px 5px 5px 5px;
    }
    .navigation_header {
    	color:#FF0000;
    	padding:3px 3px 4px 3px;
    }
    a.navigation_link:link, a.navigation_link:visited {
    	color:#006699;
    	padding:3px 3px 3px 3px;
    	border: 1px solid #F0F0F0;
    	text-decoration:none;
    	display: block;
    	width:126px;
    	text-align:left;
    }
    a.navigation_link:hover {
    	color:#006699;
    	border: 1px solid #006699;
    	background-color:#FFFFFF;
    }
    Thanks guys

  2. #2
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats actually kind of neat! (sorry had to say that) ...... the problem only happens (for me at least) when you hover over that last link "Contact us" so I would take a peak at its structure, padding, margins and borders ...... Ill glance around too.

  3. #3
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well it took some staring but I got it.... here's the new style sheet BUT here's the problem:

    #left {
    float:left;
    width:150px;
    }

    if you remove the width from this it stops!

    Anyways here are the changes I made:

    Code:
    body {
    	margin:0;
    	padding:0;
    	background-color:#CCCCCC; 
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:11px;
    	}
    #wrap {
    	width:700px;
    	margin:5px;
    	background-color:#FFFFFF;
    	border:1px solid #000000;
    	}
    #clearfooter {
    	clear:both;
    	height:0px;
    	overflow:hidden;
    	}
    #left {
    	float:left;
    	}
    #main {
    	position:relative;
    	margin-left:150px;
    	}
    #right {
    	float:right;
    	width:150px;
    	text-align:center;
    	background-color:#00FF00;
    	}
    #content {
    	padding:5px;
    	margin-right:150px;
    	text-align: left;
    	background-color:#00CCFF;
    	}
    /* Navigation Classes */
    .navigation_container {
    	background-color:#F0F0F0;
    	border:1px solid #CCCCCC;
    	padding:2px;
    	margin: 0 5px 5px 5px;
    	}
    .navigation_header {
    	color:#FF0000;
    	padding:3px 3px 4px 3px;
    	}
    a.navigation_link:link, a.navigation_link:visited {
    	color:#006699;
    	padding:3px;
    	border: 1px solid #F0F0F0;
    	text-decoration:none;
    	display: block;
    	width:126px;
    	text-align:left;
    	}
    a.navigation_link:hover {
    	color:#006699;
    	border-color: #006699;
    	background-color:#FFFFFF;
    	}
    note I got rid of redundant things like margin: 5px 5px 5px 5px; - dont need to do that! Also DONT use 0px ....... zero is zero no matter what!

    Cheers

  4. #4
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In IE 5.5 the bottom margin disappears when I mousover the Portfolio link, and reappears when I mouseover the Contact Us link.

    It is odd how it's doing that.

    It's the bottom margin here

    .navigation_container {
    background-color:#F0F0F0;
    border:1px solid #CCCCCC;
    padding:2px 2px 2px 2px;
    margin: 0px 5px 0px 5px;
    }

    Notice I changed it to 0, that elemintated the jumping.

    I think the width is playing a role too, probably because of the way IE places padding and borders incorectly.

    dc's method of removing the width from .left seems to be the best solution, as it reserves the space at the bottom of the page.

    Strange it's only affecting the two bottom links.

  5. #5
    SitePoint Guru mdumka's Avatar
    Join Date
    Jul 2003
    Location
    True North
    Posts
    642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Man, Much appreciated

  6. #6
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DocType
    Strange it's only affecting the two bottom links.
    Yeah that had me REALLY going there for a while! And when I played with the :hover I got it to change so one way the bottom one would do it, another way the 2nd to last did it!

    Thats definately one of the strangest ones Ive seen in a long time ..... I actually ended up with the old "delete an item and try method" before I stumbled on that width ........ very odd!

  7. #7
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You just gave me an idea, I'll be right back.

    False alarm.

    I'm still a bit stumped, even though I know the fix, I don't why the second link from the bottom decreases the div at bottom, while the last link restores it to it's original height.

    Must be how.........wait a minute, I'll be back.......

    I set the bottom margin to auto, and it fix it, without messing with the width or padding.

    I still can't can't figure why it's only affecting the bottom two links.

    .navigation_container {
    background-color:#F0F0F0;
    border:1px solid #CCCCCC;
    padding:2px 2px 2px 2px;
    margin: 0px 5px auto 5px;
    }
    Last edited by DocType; Mar 28, 2005 at 15:39.

  8. #8
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DocType
    You just gave me an idea, I'll be right back.

    False alarm.

    I'm still a bit stumped, even though I know the fix, I don't why the second link from the bottom decreases the div at bottom, while the last link restores it to it's original height.

    Must be how.........wait a minute, I'll be back.......

    I set the bottom margin to auto, and it fix it, without messing with the width or padding.

    I still can't can't figure why it's only affecting the bottom two links.

    .navigation_container {
    background-color:#F0F0F0;
    border:1px solid #CCCCCC;
    padding:2px 2px 2px 2px;
    margin: 0px 5px auto 5px;
    }

    OHH Doctype you ARE a pisser (thats funny in NE US talk) ..... you are my hero!

    I actually took the file into Linux and looked at it to see if there was some GOOFY thing in the text on those two links ... nothing there.

    Definately a VERY strange one! We'll have to wait till Paul gets back from holiday to see if there's something we have missed!

  9. #9
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought maybe it had something to do with the display:block, and the font used, but no dice their either.

    I tried removing the clearer div, nothing.

    I haven't tried changing the nesting order, and I really don't see that would affect it.

    I'm not sure about the way the menu is set up, I would have used a list, and none of the &bull charactors.

    Not sure if that would cause this problem.

    It definately has something to do with the box model, but I can't see why it's not affecting the rest of the links.

    Paul O'B where are you?

  10. #10
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DocType
    Paul O'B where are you?
    He's on vacation ....... well at least removing the width fixed it

  11. #11
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah it did, setting the bottom margin to 0, or auto fixed it also.

    Doesn't explain why IE saved the buggy behavior for the bottom two links though.

    I think I'm going to need a vacation by the time I figure this one out.

    Hey, you know, this might be the "Guillotine Bug".

    Yep, it's the Guillotine bug.
    Last edited by DocType; Mar 29, 2005 at 16:45.


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
  •