PDA

View Full Version : CSS hates me. layout different in i.e and firefox

muggzy
04-13-2006, 12:22 AM
hi guys,

I am trying to get these search fields lined up on one page, the css seems ok but the fields dont line up in i.e and even worse in firefox.

check out http://www.designfunky.com/project/testpage.html

<!--
.bottomleft {
position: absolute;
top: 266px;
left: 125px;
height: 81px;
}
.topleft {
position: absolute;
top: 116px;
left: 125px;
}
.searchbottomleft {
position: absolute;
left: 400px;
top: 350px;
}
googlebutton {
position: absolute;
left: 400px;
top: 375px;
}
.topright {
position: absolute;
top: 116px;
left: 511px;
}
.bottomright {
position: absolute;
left: 511px;
top: 266px;
}

-->

i had to make a div for the google search button as it was trying to leap off the page without it.

HELP!!!
kewlceo
04-13-2006, 12:44 AM
Well, the good news is that CSS does not hate you, it only hates the when you go overboard with absolute positioning. :)

How about a nice, centered, two-column layout with structural DIVs instead?
Kravvitz
04-13-2006, 01:14 AM
I suggest you use floats and margins to position those elements instead of absolute positioning.

http://css.maxdesign.com.au/floatutorial/index.htm
http://www.brunildo.org/test/#flo

I recommend clearing options 1 and 2 listed on this page (http://css-discuss.incutio.com/?page=ClearingSpace).
More information:
http://garyblue.port5.com/webdev/floatdemo.html
http://www.quirksmode.org/css/clearing.html

Curing Float Drops and Wraps (http://nemesis1.f2o.org/aarchive?id=11)

http://www.alistapart.com/articles/negativemargins/
http://www.alistapart.com/articles/practicalcss/
http://www.alistapart.com/articles/journey/
muggzy
04-13-2006, 01:14 AM
i tried tables first and that looked worse! i wanna keep up with the css revolution but i do think it has something against me. any ideas how to fix?
kewlceo
04-13-2006, 03:09 AM
Here's a sample layout using the method that Kravvitz and I were referring to in previous messages:

http://img126.imageshack.us/img126/2218/forms9ci.gif

I've done this here so that you can check it out live: forms.html (http://www.uberhost.net/work/test/forms.html)

Here's what it looks like in Firefox/IE6:

http://img122.imageshack.us/img122/3248/forms29ev.gif

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin:0;
padding:0;
}
img {
border: 0;
}
#container {
width: 850px;
margin: auto;
border: white solid;
}
#rightSide {
width: 425px;
float: right;
}
#leftSide {
margin-right:450px;
}
</style>
</head>

<body>

<div id="container">
<div id="rightSide">
<p><img alt="stock.xchng" src="stock_xchng.gif" width="169" height="50" /></p>
<form id="search_form" method="get" action="http://www.sxc.hu/browse.phtml">
<input type="hidden" name="f" value="search" />
<input name="txt" type="text" class="search" size="50" />
<input name="submit" type="submit" value="Search" src="img/btn_search.gif" />
<input type="hidden" name="w" value="1" />
</form>
<p><img alt="BBC" src="bbc.gif" width="169" height="50" /></p>
<form method="get" action="http://newssearch.bbc.co.uk/cgi-bin/search/results.pl" accept-charset="utf-8">
<input type="hidden" name="scope" value="newsifs" />
<input type="text" id="ift-searchbox" name="q" size="50" title="BBC Search" accesskey="4" />
<input type="submit" id="ift-searchbutton" src="http://www.bbc.co.uk/iftoolbar/images/search_button.gif" name="go" value="Search" alt="Search" />
<input type="hidden" name="tab" value="news" />
</form>
</div>

<div id="leftSide">
<p><img alt="Amazon" src="amazon.gif" width="169" height="50" /></p>
<form action="http://www.amazon.co.uk/gp/associates/link-types/searchbox.html" method="get" name="search" target="_top">
<input type="hidden" name="tag" value="designfunky-21" />
<input type="hidden" name="creative" value="7034" />
<input type="hidden" name="campaign" value="1878" />
<input type="hidden" name="mode" value="blended" />
<input type="hidden" name="adid" value="1P0BJZD1S76QAZCQ884J" />
<input id="keyword" name="keyword" type="text" size="50" />
<input id="button" type="submit" value="Search" name="Submit" alt="[Go]" />
</form>
<p><img alt="Google" src="google.gif" width="137" height="50" /></p>
<form method="get" action="http://www.google.com/custom" target="_top">
<input type="text" name="q" size="50" maxlength="255" value="" />
<input type="submit" name="sa" value="Search" />
<input type="hidden" name="client" value="pub-6205278404118747" />
<input type="hidden" name="forid" value="1" />
<input type="hidden" name="oe" value="ISO-8859-1" />
<input type="hidden" name="hl" value="en" />
<input type="hidden" name="cof" value = "GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000 000;GFNT:0000FF;GIMP:0000FF;FORID:1;" />
<input type="hidden" name="ie" value="ISO-8859-1" />
</form>
</div>

<p><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
<a href="http://jigsaw.w3.org/css-validator/"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a></p>

</div>

</body>

</html>
muggzy
04-13-2006, 11:51 AM
kewlceo,Kravvitz

thank you guys so much thats a great help, its really really cool that you went to that effort. Rather than just copy your example and leave i want to try and understand what im doing, so if its cool can i ask you some more q's?

So the #container is that like one big table?

#rightSide
width: 425px; - Is this what each search bar is contained in?
float: right; - whats this doing?

How is the google search bar staying in that position when there is no <div> wrapped around it?

#leftSide {
margin-right:450px; - whats this doing?

How does the things on the left know that they should stay on the left?

Again, thank you so much for your help.
_Aerospace_Eng_
04-13-2006, 12:04 PM
The #rightSide is exactly what it says. The two search forms on the right are within the div with id="rightSide". Floating that div right allows the other div (leftSide) to be on the same line as the rightSide div. If you remove the right margin in #leftSide the forms on the left should go behind the forms on the right. This is why the margin was applied. That right margin also tells the leftSide div to stay on the left. The container div is exactly what it is. It holds all of the stuff in it. It "contains" it. It allows the layout to be aligned left, center, or right quite easily. It also sets a type of boundary for the forms.
muggzy
04-13-2006, 01:52 PM
thanks aerospace.

if i wanted to move the search bars further down the screen so i can add a header image would i use the top. command then add a div around the image to position it?
Kravvitz
04-13-2006, 03:46 PM
No, you would not use the top property. That's one of the benefits of not using absolute positioning.

You could put the <img> in a new <div> before #container or you could just put the <img> as the first element in #container.
kewlceo
04-13-2006, 04:40 PM
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin:0;
padding:0;
}
img {
border: 0;
}
#header {
width: auto;
height: 200px;
background: url(avril.jpg) no-repeat top;
}
#container {
width: 850px;
margin: auto;
border: white solid;
}
#rightSide {
width: 425px;
float: right;
}
#leftSide {
margin-right:450px;
}
</style>
</head>

<body>
<div id="header"><!--Displays image--></div>
<div id="container">



<div id="rightSide">
<p><img alt="stock.xchng" src="stock_xchng.gif" width="169" height="50" /></p>
<form id="search_form" method="get" action="http://www.sxc.hu/browse.phtml">
<input type="hidden" name="f" value="search" />
<input name="txt" type="text" class="search" size="50" />
<input name="submit" type="submit" value="Search" src="img/btn_search.gif" />
<input type="hidden" name="w" value="1" />
</form>
<p><img alt="BBC" src="bbc.gif" width="169" height="50" /></p>
<form method="get" action="http://newssearch.bbc.co.uk/cgi-bin/search/results.pl" accept-charset="utf-8">
<input type="hidden" name="scope" value="newsifs" />
<input type="text" id="ift-searchbox" name="q" size="50" title="BBC Search" accesskey="4" />
<input type="submit" id="ift-searchbutton" src="http://www.bbc.co.uk/iftoolbar/images/search_button.gif" name="go" value="Search" alt="Search" />
<input type="hidden" name="tab" value="news" />
</form>
</div>

<div id="leftSide">
<p><img alt="Amazon" src="amazon.gif" width="169" height="50" /></p>
<form action="http://www.amazon.co.uk/gp/associates/link-types/searchbox.html" method="get" name="search" target="_top">
<input type="hidden" name="tag" value="designfunky-21" />
<input type="hidden" name="creative" value="7034" />
<input type="hidden" name="campaign" value="1878" />
<input type="hidden" name="mode" value="blended" />
<input type="hidden" name="adid" value="1P0BJZD1S76QAZCQ884J" />
<input id="keyword" name="keyword" type="text" size="50" />
<input id="button" type="submit" value="Search" name="Submit" alt="[Go]" />
</form>
<p><img alt="Google" src="google.gif" width="137" height="50" /></p>
<form method="get" action="http://www.google.com/custom" target="_top">
<input type="text" name="q" size="50" maxlength="255" value="" />
<input type="submit" name="sa" value="Search" />
<input type="hidden" name="client" value="pub-6205278404118747" />
<input type="hidden" name="forid" value="1" />
<input type="hidden" name="oe" value="ISO-8859-1" />
<input type="hidden" name="hl" value="en" />
<input type="hidden" name="cof" value = "GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000 000;GFNT:0000FF;GIMP:0000FF;FORID:1;" />
<input type="hidden" name="ie" value="ISO-8859-1" />
</form>
</div>

<p><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
<a href="http://jigsaw.w3.org/css-validator/"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a></p>

</div>

</body>

</html>


Take a look at the extra bit of structure I added, an id I called "header". The code is updated on my server in case you want to test in Firefox/IE.

http://www.uberhost.net/work/test/forms.html