...

View Full Version : Funky width in IE



grubesteak
05-27-2005, 10:26 PM
For reference:

http://www.cynthiawhalen.com/test/index.php

If you look and see the nav box comes close to squishing against the body box in IE. In Firefox it doesn't (and Safari and Firefox for the Mac). Any ideas on how to fix?

Thanks!

Eric

_Aerospace_Eng_
05-28-2005, 12:52 AM
Use this for your css

/* CSS Document */

#head {
margin-left: 7px;
}

body {
background-image: url(images/bodywrap.gif);
background-position: top center;
background-repeat: repeat-y;
line-height: 18px;
font: 16px "Trebuchet MS", arial, Helvetica, sans-serif;
color: #666666;
text-align: center;
margin: 0px;
padding: 0px;
}

#container {
margin: 0 auto;
width: 750px;
text-align: left;
}

#leftcolumn {
float: left;
width: 160px;
margin-top: 1em;
position:relative;
left:7px;
padding-top: 0;
border: 1px solid rgb(156, 144, 144);
background-color: white;
}

#leftcolumn ul {
margin-top: 0;
padding-top: .5em;
padding-left:0;
margin-left:0;
}


#leftcolumn ul li {
list-style-type: none;
line-height: 1.25em;
}

#leftcolumn ul li a:link {
text-decoration: none;
color: rgb(156, 144, 144);
}

#leftcolumn ul li a:visited {
color: black;
text-decoration: none;
}

#leftcolumn ul li a:hover {
text-decoration: underline;
color: #333;
}

/* Right column styles */

#rightcolumn {
padding: .5em .5em .5em .5em;
margin: 1em 1em 0 200px;
border: 1px solid rgb(156, 144, 144);
background-color: white;
}

#rightcolumn p {
margin-left: .5em;
}

#rightcolumn h2 {
margin-top: 0;
margin-left: .5em;
color: #333333;
font: 30px;
}

#rightcolumn h4 {
margin-left: .5em;
}

/* artwork page styles */
#rightcolumn div.pic {
float: left;
height: 180px;
width: 130px;
padding: 0 10px;
margin: 5px 3px;
}

#rightcolumn div.pic img {
border: 1px solid;
border-color: #444 #AAA #AAA #444;
}

#rightcolumn div.ls img {
height: 96px;
width: 128px;
margin: 32px 0 0;
}

#rightcolumn div.pt img {
height: 128px; width: 96px;
margin: 16px 16px 0px 16px;
}

#rightcolumn div.pic ul {
margin: 0.25em 0 0;
padding: 0;
font: small Arial, Verdana, sans-serif;
}

#rightcolumn div.pic ul li {
text-align: center;
list-style-type: none;
}
#rightcolumn div.pic ul li.title {
font-weight: bold;
}

#rightcolumn div.pic li.catno {
text-align: center;
}

#rightcolumn div.pic li.dem {
text-align: center;
font-style: italic;
}
#rightcolumn div.pic li.price {
text-align: right;
font-style: italic;
border-bottom: 1px solid #aaa;
/* margin: -1.5em 0 0 50%;
padding: 0 0 0 0.5em; */
}

/* footer styles */
#footer {
width: 723px;
font-size: .75em;
clear: both;
border: 1px solid rgb(156, 144, 144);
background-color: white;
margin-top: 2em;
margin-bottom: 1em;
padding: 4px;
text-align: left;
color: #666;
}

#footer a {
font-weight: bold;
text-decoration: none;
color: #666;
}

img.right { float: right; margin: 5px; }

img.left { float: left; margin: 5px; }

.strike { text-decoration: line-through; }
a ul has different padding and margin among different browsers, and when you use margin those are read differently as well, so I used position relative on the left div instead of margin and it seems to be fine.

grubesteak
05-28-2005, 01:02 AM
Can you tell me what you changed? I'm not really a ran of just trading out my stylesheet without really seeing what was changed.

Thanks!

_Aerospace_Eng_
05-28-2005, 01:34 AM
You could compare it to your original CSS to see what I changed but if you must, this is what I changed (its bold):

#leftcolumn {
float: left;
width: 160px;
margin-top: 1em;
position:relative;
left:7px;
padding-top: 0;
border: 1px solid rgb(156, 144, 144);
background-color: white;
}

#leftcolumn ul {
margin-top: 0;
padding-top: .5em;
padding-left:0;
margin-left:0;
}


#leftcolumn ul li {
list-style-type: none;
line-height: 1.25em; /*Took out margin here, you can put it back if you want*/
}

grubesteak
05-28-2005, 01:36 AM
Thanks. I've been staring at code all day. I wasn't really in the mood for checking all my code.

Thanks again. I'll give it a shot!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum