[HuggyBear]

OK, im trying to create CPS 2.0 - less tables, more css, more SEO blah blah blah blah

Basically, what am i doing wrong - shows up perfectly in IE but not in FF

Image: http://cpsdirect.co.uk/stupid_firefox.png
CSS:

body
{
 margin: 0 0 0 0;
}
#header
{
 width:100% !important;
 height:165px !important;
 top:0;
 display: block;
}
#logo
{
 float: left;
 top:0;
 width:160px;
 height:160px;
 border:none;
 margin-top:5px;
 margin-left:3px;
}
#search_bar
{
 background: url(images/search_bar_background.png) repeat-x scroll top;
 height: 65px !important;
 min-height: 65px;
 width: 100%;
 text-align: center;
 top: 165px;
 display: block;
}
#search_form
{
 width:60% !important;
 height:25px !important;
 display: block;
 margin-top:20px;
}
.search_term
{
 background: White url(images/search_textbox_background.png) no-repeat scroll top;
 border: none;
 height: 17px !important;
 width: 373px;
 font: normal normal normal 14px/normal Arial, Helvetica, sans-serif;
 color: Gray;
 padding-top: 4px;
 padding-left: 7px;
}
#shopping_trolley
{
 background: transparent url(images/shopping_trolley_header.png) no-repeat scroll top;
 width: 247px !important;
 margin-top:5px;
 height: 120px;
 overflow: hidden;
 float: right;
 top: 10px;
 padding-top: 35px;
 padding-left: 10px;
 font: normal normal normal 11px/normal Arial, Helvetica, sans-serif;
 letter-spacing: 1px;
 color: #555666; 
}

[IP2]

what am i doing wrong?

Working too late... sleep on it!

[HuggyBear]

HTML:

<div id="header">
<div id="logo">
<img src="images/logo.png" style="border:none;"/>
</div>
<div id="shopping_trolley">
You have <b>0</b> items in your shopping trolley
</div>
<div id="search_bar">
<div id="search_form">
<form action="SimpleSearch.aspx" method="get" name="SiteSearch">
<table border="0" cellpadding="2" cellspacing="0">
<tr>
<td><input type="text" name="q" accesskey="s" class="search_term" /></td>
<td><input type="image" name="searchSubmit" src="images/search_submit.png" alt="" class="search_submit"/></td>
</tr>
</table>
</form>
</div>
</div>
</div>

TIA

[HuggyBear]

Anyone????

[Mike]

its probably a float clearance problem

try adding something like

<div style="clear:both" ></div >

after

<div id="logo">
<img src="images/logo.png" style="border:none;"/>
</div>

[HuggyBear]

[image deleted]
Its done something, but still wrong :S

[tommy]

right here goes.

Mike was on the right track but you can do this in the CSS without creating an unnecessary <div> element.

within the #search_bar in your css add the following:

clear:both;

This will make the search bar move below the logo and the basket.

Then remove the added <div style="clear:both" ></div >

Do this first then we can get onto the next step.

[HuggyBear]

Hey man, thanks, I forgot to mention I managed to sort it - here is the new CSS (i added the div in code but added it after trolley div

body
{
margin: 0 0 0 0;
}
#header
{
width:100% !important;
height:165px !important;
top:0;
display: block;
}
#logo
{
float: left;
top:0;
width:160px;
height:160px;
border:none;
margin-top:5px;
margin-left:3px;
display:block;
}
#search_bar
{
background: url(images/search_bar_background.png) repeat-x scroll top;
height: 65px !important;
min-height: 65px;
width: 100%;
text-align: center;
margin-top: 0
px;
display: block;
}
#search_form
{

height:25px !important;
display: inline-block;
margin-top:0px;
margin-left:auto;
margin-right:auto;
padding-top:20px;
width: 400px;
}
.search_term
{
background: White url(images/search_textbox_background.png) no-repeat scroll top;
border: none;
height: 17px !important;
width: 373px;
font: normal normal normal 14px/normal Arial, Helvetica, sans-serif;
color: Gray;
padding-top: 4px;
padding-left: 7px;
vertical-align:middle;
}
#shopping_trolley
{
background: transparent url(images/shopping_trolley_header.png) no-repeat scroll top;
width: 247px !important;
margin-top:8px;
height: 120px;
overflow: hidden;
float: right;
margin-right:3px;
padding-top: 35px;
padding-left: 10px;
font: normal normal normal 11px/normal Arial, Helvetica, sans-serif;
letter-spacing: 1px;
color: #555666;
display:block;
}

[tommy]

cool, just double check IE6 as you may have some issues with overflows as I notice you use they quite a bit.

[HuggyBear]

good point really need to install virtual pc or some other virtualisation software installed to test on multiple browsers....

And with IE8 around the corner, it boggles why so many people are still on IE6...