PDA

Click to See Complete Forum and Search --> : CSS: Whitespace between div`s in IE and not FF (searched)

mrchaos
12-17-2007, 04:39 PM
I am having trouble with some spacing between divs in IE...I have searched and tried many things to no avail. Hoping for some help here.

IE put extra whitespace between upperrightlinks/upperrightsearch and upperrightnav and FF does not. Any help would be great.

Thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="" rel="icon" type="image/x-icon" />
<link href="" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="css/global-styles.css" />
<link rel="stylesheet" type="text/css" href="css/index-styles.css" />
<script language="javascript" type="text/javascript" src="scripts/global-rollovers.js"></script>
</head>
<body>
<div id="wrapper">
<div id="uppernavigationwrapper">
<div id="upperlogo">
<a href="index.htm"><img src="content/images/logo-forsythe.gif" width="200" height="100" alt="Forsythe Header Logo" /></a>
</div>
<div id="upperrightwrapper">
<div id="upperrightlinks">
<a href="">Distributors</a>
&nbsp;|&nbsp;
<a href="">Employee Directory</a>
&nbsp;|&nbsp;
<a href="">MSDS</a>
&nbsp;|&nbsp;
<a href="">Product Data</a>
&nbsp;&nbsp;&nbsp;&nbsp;
</div>
<div id="upperrightsearch">
<form id="formsearch" method="get" action="">
<input type="text" value="Search" class="searchinput" id="" onFocus="" title=""/>
<input type="image" value="go" class="searchbut" id="" src="content/images/bg/bg-go.gif" title=""/>
</form>
</div>
<div id="upperrightnav">
<a href="products.htm"><img src="content/images/tab.gif" width="110" height="40" alt="Products" /></a>
<img src="content/images/tabs/tab-spacer.gif" width="1" height="40" alt="Tab Spacer" />
<a href="services.htm"><img src="content/images/tab.gif" width="110" height="40" alt="Services" /></a>
<img src="content/images/tabs/tab-spacer.gif" width="1" height="40" alt="Tab Spacer" />
<a href="contactus.htm"><img src="content/images/tab.gif" width="110" height="40" alt="Contact Us" /></a>
</div>
</div>
</div>
<div id="header">
<img src="content/images/mainbanner.jpg" width="1024" height="100" alt="Main Page Banner" />
</div>
<div id="maincontainer">
<div id="mainnavigation">
<a href="">Test</a>
</div>
<div id="main">
<hr />
<div id="brandwrapper">
</div>
</div>
</div><!--<div class="clear"></div>-->
<div id="footercontainer">
<div id="footerleft">
<a href="">Privacy Statement</a>
&nbsp;|&nbsp;
<a href="">Terms of Use</a>
&nbsp;|&nbsp;
<a href="">Site Map</a>
</div>
<div id="footerright">
&copy;
<script language="javascript" type="text/javascript">var tempDate = new Date();document.writeln(tempDate.getFullYear());</script>
</div>
</div>
</div>
</body>
</html>




body {
background: #d5d5d6 url(../content/images/bg/bg-body.gif);
background-repeat: repeat-x;
font-family: Tahoma, Verdana;
font-size: 12px;
text-align: center;
}

#wrapper {
margin: 0 auto;
width: 1024px;
text-align: left;
background: #ffffff;
}

#uppernavigationwrapper {
width: 1024px;
height: 120px;
clear: both;
background-color: #ffffff;
border-bottom: 3px solid #996600;
}

#uppernavigationwrapper a:link {
color: #996600;
text-decoration: none;
}

#uppernavigationwrapper a:visited {
color: #996600;
text-decoration: none;
}

#uppernavigationwrapper a:hover {
color: #996600;
text-decoration: underline;
}

#uppernavigationwrapper a:active {
color: #996600;
}

#upperlogo {
float: left;
width: 236px;
height: 100px;
padding: 10px 0px 10px 20px;
}

#upperrightwrapper {
float: right;
height: 110px;
padding: 10px 20px 0px 0px;
color: #996600 !important;
text-align: right;
border: 1px solid #000000;
}

#upperrightlinks {
float: left;
height: 11px;
padding: 6px 0px 6px 0px;
border: 1px solid #000000;
}

#upperrightsearch {
float: left;
width: 222px;
height: 23px;
border: 1px solid #000000;
}

#upperrightnav {
clear: both;
/*height: 100%;*/
/*padding: 47px 0px 0px 0px;*/
border: 1px solid #000000;
}

#header {
float: left;
width: 1024px;
height: 100px;
overflow: hidden;
}

#maincontainer {
float: left;
width: 1024px;
min-height: 350px;
background: url(../content/images/bg/bg-content.jpg);
}

#mainnavigation {
float: left;
padding: 8px 8px 8px 18px;
width: 230px;
height: 100%;
}

#mainnavigation a{
font-size: 16px !important;
}

#mainnavigation a:link {
color: #330099;
text-decoration: none;
}

#mainnavigation a:visited {
color: #330099;
text-decoration: none;
}

#mainnavigation a:hover {
color: #330099;
text-decoration: underline;
}

#mainnavigation a:active {
color: #330099;
}

#main {
float: right;
padding: 8px 8px 8px 8px;
width: 752px;
height: 100%;
}

#footercontainer {
float: left;
padding: 5px 8px 8px 5px;
width: 1012px;
height: 10px;
clear: both;
color: #ffffff;
border-top: 3px solid #996600;
background-color: #330099;
font-size: 10px;
}

#footerleft {
float: left;
width: 506px;
}

#footerright {
float: right;
width: 506px;
text-align: right;
}

#footercontainer a:link {
color: #ffffff;
text-decoration: none;
}

#footercontainer a:visited {
color: #ffffff;
text-decoration: none;
}

#footercontainer a:hover {
color: #ffffff;
text-decoration: underline;
}

#footercontainer a:active {
color: #ffffff;
}

form {
margin: 0px;
}

select, input {
font-size: 11px;
}

#upperrightsearch form {
min-height:22px;
height:auto !important;
height:22px;
width: 222px;
margin: 2px 0px 0px 0px;
padding: 2px 0px 0px 0px;
display: block;
background: url(../content/images/bg/bg-search.gif);
background-repeat: no-repeat;
}

#upperrightsearch form .searchinput {
width: 153px;
margin: 2px 0px 0px 0px;
padding: 0px;
border: 0px;
background: none;
vertical-align: middle;
}

#upperrightsearch form .searchbut {
margin: 0px 2px 0px 1px;
background: none;
vertical-align: middle;
}

img {
border: none;
}
/*top right bottom left */
cuikai
12-18-2007, 02:06 AM
#upperrightlinks {padding:6px 0} /* FireFox */
*html #upperrightlinks { padding:600px 0} /* ie6 fixed */
*+html #upperrightlinks { padding:6000px 0} /* ie7 fixed */

you can change the numerical value by yourself
Centauri
12-18-2007, 03:41 AM
Don't use unnecessary hacks - target the source of the problem. This is a HasLayout issue, and giving #upperrightnav a height will address this :#upperrightnav {
clear: both;
border: 1px solid #000000;
height: 40px;
}
mrchaos
12-18-2007, 05:26 AM
#upperrightnav {
clear: both;
border: 1px solid #000000;
height: 40px;
}

The above works to solve one problem, but causes another in IE. The whitespace is eliminated but #upperrightlinks/#upperrightsearch are now being pushed to the left up against #upperlogo. In FF everything stays to the right as I would like to too.


http://www.forsythe.on.ca/working/index.htm (http://www.forsythe.on.ca/working/index.htm) <-- See link, also notice the extra 2px still under the tabs in IE6.
Centauri
12-18-2007, 06:13 AM
Floated elements without widths can be unreliable depending on content - assigning a width solves horizontal alignment problem.

Images are by default aligned to the text baseline (whether there is text or not), leaving room below for text decenders - align the images to the bottom.

#upperrightwrapper {
float: right;
height: 110px;
padding: 10px 20px 0px 0px;
color: #996600 !important;
text-align: right;
border: 1px solid #000000;
width: 580px;
}

#upperrightnav img {
vertical-align: bottom
}

PS: much easier with a live link - thanks :)
mrchaos
12-18-2007, 06:20 AM
Floated elements without widths can be unreliable depending on content - assigning a width solves horizontal alignment problem.

Images are by default aligned to the text baseline (whether there is text or not), leaving room below for text decenders - align the images to the bottom.

#upperrightwrapper {
float: right;
height: 110px;
padding: 10px 20px 0px 0px;
color: #996600 !important;
text-align: right;
border: 1px solid #000000;
width: 580px;
}

#upperrightnav img {
vertical-align: bottom
}

PS: much easier with a live link - thanks :)


That's perfect. Thanks so much!
mrchaos
12-20-2007, 07:31 AM
having the alignment issue again in IE....not sure what i did. mind having a look again?

http://www.forsythe.on.ca/working/
Centauri
12-20-2007, 08:29 AM
The problem here is that both #upperrightlinks and #upperrightsearch are floated left, "pushing" against the left side of #upperrightwrapper, which in turn is being floated right. IE doesn't seem to be able to work out the combined widths of the internal parts to be able to shrinkwrap the contents when floated right. Applying a width to #upperrightwrapper works, but you need to get the right width (about 560px at the moment) as the contents are up against its left side. Accurately setting the width here can be a bit of a problem as the width depends on the font type and size, and a text resize will break it.

I would be more inclined to put the code for #upperrightsearch before the code for #upperrightlinks in the html, and float both of these right in the css. See if that works any better (leave the width off #upperrightwrapper).
mrchaos
12-20-2007, 08:42 AM
That fixes it for IE but breaks it for FF....I'm sure I'm just missing something small here.

Thanks for all the help!
Centauri
12-20-2007, 09:11 AM
I noticed you commented out a width of 616px on #upperrightwrapper - as this value is the exact width of #uppernavigationwrapper minus #upperlogo, uncommenting it gets FF working properly, and it seems to be ok in IE as well. As IE sometimes has problems adding things up, I would make that width around 610px.
mrchaos
12-20-2007, 09:32 AM
Alright finally got it. Thanks so much!

I tried uncommenting the width and it didn't seem to work. Guess I didn't refresh the page properly.

Thanks