...

View Full Version : Width issue in IE



Keirran
05-05-2006, 05:53 AM
Been scratching my head over this problem for the last day or so.

I've currently got a project template that I'd like to get to look like <a href="http://img75.imageshack.us/img75/2788/firefox3of.jpg">this</a>. (See the light blue box on the left.) However, it looks like <a href="http://img75.imageshack.us/img75/7263/ie9up.jpg">this</a> in Internet Explorer.

I can't seem to get it to obey! I've tried a number of things.

This is what I've got, for that portion, for CSS:

#nav {position: relative; left: 15px; top: -12px; background: #00FFFF; margin: 0px 0px 0px 0px; padding: 0px 2px 1px 2px; width: 136px; height: 90px;}
#list-menu {position: relative; left: -39px; top: 4px; list-style: none; font-family: verdana, arial, sanf-serif; font-size: 12px;}
#list-menu ul {list-style: none;}
#list-menu li {margin: 2px 0 0 0;}
#list-menu a {display: block; width:120px; padding: 2px 2px 2px 10px; border: 1px solid #000000; background: #0C2E82 ; text-decoration: none;}
#list-menu a:link, #list-menu a:active, #list-menu a:visited {color: #000000;}
#list-menu a:hover {border: 1px solid #FFFFFF; background: #0092CF; color: #FFFFFF;}

Any help, suggestions, and whatnot, would be helpful. I hope I'm just looking something over.

_Aerospace_Eng_
05-05-2006, 07:20 AM
Padding does count for overall width so your nav is actually 134px wide plus 6 more pixels for the padding and width in the #nav CSS. Without seeing the html thats about as much help as I can give you. Make your #list-menu a a width of 108px

Arbitrator
05-05-2006, 07:29 AM
No one can really help you without the rest of your code.

I will tell you though that default styles for HTML lists are notably different for each browser. Try putting this rule at the top of your style sheet:

* {
margin: 0;
padding: 0;
border: 0; /* optional */
border-collapse: collapse; /* optional (for tables) */
}

It's the general rule I use for CSS and it'll make all those lists equal in those regards.

Keirran
05-05-2006, 10:36 AM
Here's the code I have so far:

<!DOCTYPE html PUBLIC "-w3c//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/html1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<div id="header">
<div id="inheader">
Logo and stuff located here.
</div>
</div>
<div id="nav">
<div id="list-menu">
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">About the dealer</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="content">
<h2> This is copy content</h2>
<div id="break">
<div id="net">
<h3>Wildblue Information</h3>
<p>lobortis mollis. Nam tempus, diam eu auctor mollis, neque ligula sodales turpis, non porta erat sapien ut orci. </p>
<br />
<a href="#">More Info</a>
</div>
</div>
</div>
</body>
</html>


and my CSS:

body {background: #0C2E82; margin: 0 0 0 0; padding: 0 0 0 0; border-collapse: collapse;}
#header {height: 120px; background: #0C2E82;}
#inheader {position: relative; left: 15px; background: #FFFFFF; height: 120px; width: 96%;}
#nav {position: relative; left: 15px; top: -12px; background: #00FFFF; margin: 0px 0px 0px 0px; padding: 0px 2px 1px 2px; width: 136px; height: 90px;}
#list-menu {position: relative; left: -39px; top: 4px; list-style: none; font-family: verdana, arial, sanf-serif; font-size: 12px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;}
#list-menu ul {list-style: none;}
#list-menu li {margin: 2px 0 0 0;}
#list-menu a {display: block; width:120px; padding: 2px 2px 2px 10px; border: 1px solid #000000; background: #0C2E82 ; text-decoration: none;}
#list-menu a:link, #list-menu a:active, #list-menu a:visited {color: #000000;}
#list-menu a:hover {border: 1px solid #FFFFFF; background: #0092CF; color: #FFFFFF;}
#content {position: relative; left: 174px; width: 72%; top: -69px; background: #FFFFFF; padding: 6px 9px 6px 9px; -moz-border-radius: 1em;}
#break {text-align: center;}
#net {border: 1px dashed #CCCCCC; width: 100%;}
#net a {text-decoration: none; color: #FF0000;}
#tvone {border: 1px dashed #CCCCCC;}
h2 {text-align: center;}

Changing the width of my Nav div, making it smaller; does not effect the view in IE, however making it larger does. I have a feeling it's got something to do with this line, however, I can't think of another way to achieve this:

#list-menu {position: relative; left: -39px; top: 4px; list-style: none; font-family: verdana, arial, sanf-serif; font-size: 12px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;}

Thanks for the tips and assistance.

VIPStephan
05-05-2006, 11:17 AM
Oh man, you're overcomplicating things so bad! There is no need for two additional divs around the list (<ul>). You have the <ul>, the <li>s and the <a>s to apply styles. I think that's enough to achieve what you want.
And let me say this: Your formatting sucks. (No personal insult) You should indent every child element a little bit more. That helps you and us to see where the opening and respective closing tags are.
I'm gonna look at your problem and post an answer in a minute (or two). :)

VIPStephan
05-05-2006, 12:05 PM
Here we go:


ul {
list-style: none;
background: #00FFFF;
margin: -1px 0 0 15px;
padding: 0 2px 1px 2px;
width: 136px;
height: 90px;
border-top: 1px solid #FFF;
}
li {margin-top: 2px;}
li a {
display: block;
width:122px;
padding: 2px 2px 2px 10px;
border: 1px solid #000000;
background: #0C2E82;
text-decoration: none;
font-family: verdana, arial, sanf-serif;
font-size: 12px;
line-height: 18px;
}

Delete your <div id="nav"> and <div id="list-menu"> (and change the CSS for the link pseudo classes). There are spacing issues with the list items so I set a line height to make it look equal without using a hack. Also I needed a top border on the list. you can see what happens in Firefox without it.

Oh and no positioning needed. Just a left margin... you can do that to the header too.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum