#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    6
    Rep Power
    0

    [CSS] position off a few pixels in IE...why and how?


    Alright here goes. I just redesigned my website. To see how it *SHOULD* display, use Mozilla, Safari, etc... Use Internet Explorer on Windows to see how it displays incorrectly.

    The first way that I wanted to do it was to have everything either float: left; or float: right; and then use relative positioning on the left menu to bump it left. The problem with this is that Internet Explorer didn't want to do that and since I'm designing with every internet user in mind, I must make everything viewable for eve

    I assume that the problem lies with the stylesheet in these two sections...

    Code:
    #menu {
    	position: absolute;
    	top: 115px;
    	left: 145px;
    	width: 50px;
    	padding-right: 0px;
    	padding-top: 0px;
    	text-align: left;
    	font-family: LucidaGrande, Lucida, Helvetica, Arial, sans-serif;
    	margin-top: 0px;
    	voice-family: "\"}\"";
    	voice-family: inherit;
    	z-index: 200;
    	}
    	
    a.tab, a.tab:link {
    	background-color: #222222;
    	border: 1px solid #EFEFEF;
    	padding: 12px 0em 12px 10px;
    	font-size: 14px;
    	color: #FFFFFF;
    	font-weight: bold;
    	float: left;
    	width: 95px;
    	margin: 5px 0px 5px 0px;
    	text-decoration: none;
    	}
    a.tab:visited {
    	color: #FFFFFF;
    	}
    a.tab:hover {
    	background-color: #666666;
    	color: #FFFFFF;
    	}
    a.tab:active {
    	color: #FFFFFF;
    	}
    a.tab.activeTab, a.activeTab:link {
    	border-right-width: 0px;
    	width: 100px;
    	background-color: #000000;
    	}
    and
    Code:
    .rightContent {
    	float: right;
    	width: 535px;
    	background-color: #000000;
    	border: 1px solid #EFEFEF;
    	margin-left: 0px;
    	margin-bottom: 10px;
    	margin-left: 0px;
    	margin-right: 5px;
    	text-align: center;
    	color: #FFFFFF;
    	}
    The (X)HTML for this section looks like this...

    Code:
    <div id="menu">
    		<a class="tab activeTab" href="http://www.paularms.com">Home</a><br />
    		<a class="tab" href="http://www.paularms.com/archives.html">Archives</a><br />
    		<a class="tab" href="http://www.paularms.com/about/downloads.html">Downloads</a><br />
    		<a class="tab" href="http://www.paularms.com/about/tutorials.html">Tutorials</a><br />
    		<a class="tab" href="http://www.paularms.com/about/index.html">About</a><br />
    </div>
    
    <div id="content">
    	<div class="rightContent">
    ..........
    Does anyone know WHY Internet Explorer is displaying this wrong? Even more helpful would be HOW to fix the problem.

    Thanks everyone.
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Location
    city of sin, state of the art
    Posts
    421
    Rep Power
    0

    Tantek hack?


    yes i believe this is a known bug in IE - i might be confused here but check out the tantek hack...

    http://tantek.com/CSS/Examples/boxmodelhack.html

    ..good lucky and rock on!!
    "I hate quotations."
    -ralph waldo emerson-
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    6
    Rep Power
    0
    I'm already using the box model hack for the #menu, but I also added it to a.tab, a.tab:link and still have problems
  6. #4
  7. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    This may not apply here, but it's the only thing that comes to mind. Floats are not supposed to take up space—that is they are removed from the flow. IE effs this up by causing the containing block to improperly expand. In your page, the anchors have 95px width in a container (#menu) that is 50px wide. Properly, the anchors should extend beyound the menu box. IE will widen the menu box instead.

    I don't know of a cure, so I design with awarenesss of IE evil, and jigger the design so that IE doesn't break things too badly.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo