Pls advise me what is wrong with this css

Hi guys,

I’d created a simple search box using table and divs. However they look different in IE 6 and FF.

I could easily fix the problem with hacks, but I’ll rather learn the right way of doing things to save from troubles that will just keep occurring.

HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="search.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<table border="0" width="100&#37;" cellspacing="0" cellpadding="0" id="search-table">
		<tr>
			<td>
				<div id="search-field-wrapper">
					<form method="get" action="" name="quick_find">
						<input type="text" class="search-form-field" maxlength="30" size="10" name="keywords"/>
					</form>
				</div>
				<div id="search-button-wrapper">
					<span id="nav">SEARCH</span> <img src="susiek-search-arrow.jpg" />
				</div>
			</td>
		</tr>
	</table>
</body>
</html>

CSS:


#header-table {background: url(susiek-bg.jpg) repeat-x; height:190px;}
#search-table {background: url(susiek-search-bg.jpg) repeat-x; height:37px;width:244px;}
#search-field-wrapper {margin-left:10px;float:left;width:157px;height:19px;}
#search-button-wrapper {margin-left:5px;float:left;}
.search-form-field {width: 157px;height:19px;border:none;background:url(susiek-search-field-bg.jpg) no-repeat;padding-left:5px}

The result:
http://sandbox.lessishmore.com/search.html

I believe we should be using margins to position the box, and padding to position the stuffs inside the box?

Do offer some advice to reduce the possible implications of browser conflicts while using CSS.

Hi,

I’d ditch the table for a start as form elements shouldn’t be in a table (according to most experts) and it makes it harder anyway.

I’d do something simpler and more semantic like this.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#search-field-wrapper fieldset {
    border:none;
    margin:0;
    padding:0;
}
#search-field-wrapper legend span {
    position:absolute;
    left:-999em;
    top:-999em;
}
#search-field-wrapper {
    margin-left:10px;
    float:left;
    width:157px;
    height:37px;
    width:244px;
    background: url(http://sandbox.lessishmore.com/susiek-search-bg.jpg) repeat-x;
    display:inline;
}
.search-form-field {
    width: 147px;
    height:19px;
    border:none;
    background:url(http://sandbox.lessishmore.com/susiek-search-field-bg.jpg) no-repeat 100&#37; 0;
    padding:2px 5px;
    font-family:Arial, Helvetica, sans-serif;
    float:left;
    margin:8px 0 0 5px;
    display:inline;
}
#quick-search {
    float:left;
    width:75px;
    margin:7px 0 0;
    padding:2px 5px;
    text-align:center;
    text-transform:uppercase;
    background:transparent url(http://sandbox.lessishmore.com/susiek-search-arrow.jpg) no-repeat 100% 50%;
    color:#000;
    font-family:Arial, Helvetica, sans-serif;
    border:none;
    font-weight:bold;
}
</style>
</head>
<body>
<div id="search-field-wrapper">
    <form method="get" action="" name="quick_find">
        <fieldset>
        <legend><span>Quick Find</span></legend>
        <input type="text" class="search-form-field" maxlength="30" size="10" name="keywords" value="Enter Search text here...">
        <input type="submit" name="quick-search" id="quick-search" value="Search">
        </fieldset>
    </form>
</div>
</body>
</html>


There will always be pixel difference between browsers but the above looks pretty much the same to me.

what does the % means in this statement?

background:transparent url(http://sandbox.lessishmore.com/susiek-search-arrow.jpg) no-repeat 100% 50%;

I’m trying to get used to having divs in tables because the cms that i’m using generates tables for all the output.

in any case, its not possible to be pixel perfect for both ie and ff? so i guess ie conditionals are the only way to make they match?

that can be done but it looks like double work to me. and especially when ie doesn’t have a firebug plugin that lets us play around with the css values before committing them. or is there?

The 100% means “move it over to the far right” and 50% means center it vertically.

in any case, its not possible to be pixel perfect for both ie and ff? so i guess ie conditionals are the only way to make they match?

If pixel perfection is your goal, conditional comments are often the best solution.

ie doesn’t have a firebug plugin that lets us play around with the css values before committing them. or is there?

IE8 has built-in web developer tools that allow you to add styles etc. Not as good as Firebug, but better than nothing. (You can also turn on compatibility mode–or whatever it’s called–and test in IE7, although it’s not totally reliable.)

Change your cms and get a decent one :slight_smile: (that was a joke as I know that it isn’t always possible to change).

The fact that the cms may generate tables should make no difference to the code I gave you anyway as it can sit inside a table quite comfortably.

in any case, its not possible to be pixel perfect for both ie and ff? so i guess ie conditionals are the only way to make they match?

IE isn’t the issue here as it renders pretty much how you want it in this instance. The difference is between other browsers Firefox/Safari/ opera and even each version of those browsers. They all have their own ideas on how form elements should look and work hence the differences.

The code I gave above is as about as close as you can get and I doubt you even noticed where the differences were.:slight_smile:

thanks ralph.m thats some great info there.

this is so unfair. haha. Paul O’B wats in your code that makes them so versatile?

He didn’t use a table (you shouldn’t have been using one anyway) and he used proper elements with labels to match inputs making accessibility good, his code is clean and semantic. There’s quite a bit difference in your old code and Pauls’ new :slight_smile:

Ya know, there are still tons of web devs coding in tables. I’d guess at least equal to the amount of css’ers. Usually, you don’t see them here in forums for two reasons (again guessing). One, they get castrated. Two, they probably don’t have any questions; because they’ve been coding that way for the last twenty years, and because nothing is broke in “whatever-browser” happens to be barfing at the time. You know I’m all css-guy… just saying…

I remember when our company was exploring pre-made shopping cart template CMS thingies…
I looked at OSCommerce.

It’s all tables, and super nested ones at that.

Now think: how popular is OSCommerce? I thought it was pretty popular. How easy can it be to switch your current business over to another one? Can’t be that easy. OSCommerce HTML was terrible.

We checked out Zen cart. No tables, but instead it looked like they pretty much substituted every td of a table for a div. I saw divs nested 15 levels deep. No easier to work with (and possibly harder). How popular is Zencart? I hear it’s pretty darn popular.

It’s all nice to use use appropriate tags and CSS but we can see how poor innocent souls get stuck with tabled formats even in These Modern Times. Pray for them, my brethren, pray! May enlightenment shine upon their paths!
Lawlz, web standards evangelistas. Sometimes we preachin’ to the choir.

Unfortunately, even the most advanced CMS uses tables… and when they don’t they suffer serious divitis :frowning:

But I guess there are some improvements… I guess…

A couple of years ago I was asked to whip out a snazzy, graphics-laden design in virtually no time at all, and for no bucks either (my school wanted it), so I went surfing for templates. I found what I thought was a truly awesome freebie template site – slick graphics, good layouts, yowsah! Then I peeked under the hood and got a different reaction. Tables, tables everywhere. It hasn’t improved: even the home page uses tables. It uses spacer gifs. Urrrgghhh!

[ot]Arg, spacer gifs!
Thar they blow! With humps like snow-hills, it’s spacer gifs![/ot]

One of the things I like about ExpressionEngine (and a few others on the block, like SilverStripe and MODx) is that they give you no front-end code at all. You start with a clean slate and write your HTML as it suits you.

Yes I was using oscommerce. And I really hate it too. So many nested tables till I totally lost track if they are even closed properly.

I thought mine was straightforward. I used only margins, width and height (float and backgrounds aside).

Oh…and I just found out the problem I faced is called the IE 6 double margin bug. And display:inline is supposed to fix it.

I guess thats the trick to making it versatile?

And I also think that CMSs should just return raw values and not mess with the display.

Oh…and I just found out the problem I faced is called the IE 6 double margin bug. And display:inline is supposed to fix it.

I guess thats the trick to making it versatile?

It’ll get rid of doubled margins, lawlz.

IE6 doesn’t always double them (the margins in the direction of the float on the side of the container’s edge get doubled) but the display: inline should always be safe, because no browser will listen to that line on anyone you’ve got floated (you have to say float:none first to get display: inline to actually do anything).

And I also think that CMSs should just return raw values and not mess with the display.

You mean, keep the markup separate from the back-end code who’s generating it? Many many many people agree with you.

Because of my reaction when I saw OSCommerce’ HTML markup, we did not use it : )

If you are able to switch, though, there are much more decent CMS’ out there (who are also free). As I recall, Expression Engine is not free but it’s not hideously expensive either and because you pay, you do get support. Everyone’s been waiting for version 2, which I guess is out now.

Paul catering for bug fixes does help make it versatile but the reasoning behind the versatileness is explained in my previous post :slight_smile:

He makes the code logical :slight_smile:

Yes, version 2 out, but still in Beta, and pretty buggy, I have to say. Will probably be a good year before the final version is launched.