SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:
    Code HTML4Strict:
    <!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%" 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:
    Code 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.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    <!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.

  3. #3
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what does the &#37; 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?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by resting View Post
    what does the % means in this statement?
    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.)

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by resting View Post
    I'm trying to get used to having divs in tables because the cms that i'm using generates tables for all the output.
    Change your cms and get a decent one (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.

  6. #6
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,595
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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...

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.

  10. #10
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,222
    Mentioned
    237 Post(s)
    Tagged
    1 Thread(s)
    Unfortunately, even the most advanced CMS uses tables... and when they don't they suffer serious divitis

    But I guess there are some improvements... I guess...

  11. #11
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    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!

  12. #12
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:

    Arg, spacer gifs!
    Thar they blow! With humps like snow-hills, it's spacer gifs!

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by molona View Post
    Unfortunately, even the most advanced CMS uses tables... and when they don't they suffer serious divitis
    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.

  14. #14
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  15. #15
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,595
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by resting View Post
    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.
    Paul catering for bug fixes does help make it versatile but the reasoning behind the versatileness is explained in my previous post

    He makes the code logical
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  17. #17
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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.
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •