• Advertisement
Sign in to follow this  

[web] CSS trouble

This topic is 4142 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Here's a simple HTML file with some CSS. On Firefox the buttons are shown with the red border aligned with the black line. In IE the buttons sit just above the black line. Which browser is right? Is there any way to get both browsers to show the buttons with the red lines aligned with the black one?
<html>
    <head>
        <style type="text/css">
            #main
            {
                border-bottom: solid 3px black;
                height: 26px;
            }
 
            input
            {
                height: 29px;
                border-bottom: solid 3px red;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <span><input type="submit"></span>
            <span><input type="submit"></span>
        </div>
    </body>
</html>


Share this post


Link to post
Share on other sites
Advertisement
Here's the dirty truth: They are both right. (In their own right of course.)

Each web browser interprets CSS in their own way. Some styles show up the same and some different.

IE has some of the poorest support for CSS of all major browsers. If you open the file in Netscape or Opera the borders will probably overlap. (Haven't tested this yet. So don't quote me.)

I haven't figured out how to fix it for IE but I will look into it.

Share this post


Link to post
Share on other sites
Adding this:

* html input {
margin-bottom: -3px;
}


makes it align properly, but in IE the black bar will be in front, while in FF the button will be in front.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement