div "SearchBar" doesn't display properly in firefox

kee2ka4 · #1 Nov 13th, 2007, 20:29

Here is the layout of my html divs:

<div id="Wrapper">
   <div id="HeaderContent">
       <div id="Logo">Logo Goes Here</div>
       <div id="Header">Header Goes Here</div>
    </div>
    <div id="NavigationContent">
        <div id="Navigation">Navigation Goes here</div>
        <div id="SearchBar">Search Goes Here</div>
     </div>
</div>

I have the width of the wrapper to 920 px fixed, with left and right margins set to auto to display everything in center.

I have the div "Navigation" set to 20 px and below that I have div "SearchBar" with a input search form but for some reason it displays it on top of the navigation div toward the right side in firefox, it displays it correctly in Internet Explorer.

Any ideas why this happens?

Thanks,
Ket

alexgeek · #2 Nov 13th, 2007, 20:32

Post entire CSS or host this online please.

kee2ka4 · #3 Nov 13th, 2007, 21:02

Hi here is my css code:

HTML: Select all

#divWrapper {
    background-color: #FFFFFF;
    width: 920px;
    margin-right: auto;
    margin-left: auto;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #bcbcbc;
    border-left-color: #bcbcbc;
    margin-top: 0px;
    margin-bottom: 0px;
}
#divLogo {
    float: left;
    height: 65px;
    width: 365px;
    padding-top: 10px;
    padding-left: 15px;
}
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    color: #474f49;
    background-color: #cbcbcb;
    margin: 0px;
}
#divHeader {
    float: right;
    height: 75px;
    width: 540px;
}
#divNavigationBar {
    height: 20px;
    text-align: center;
    font-weight: bolder;
    padding-top: 5px;
    padding-bottom: 5px;
}
#divNavigationContent {
    width: 920px;
}
#divSearchBar {
    padding-top: 10px;
    padding-bottom: 5px;
    text-align: center;
    width: 920px;
}
#divSearchBar #form1 {
    margin: 0px;
    padding: 0px;
}
#divSearchBar #form1 input {
    width: 320px;
    border: 1px solid #000000;
}

Thanks

Monie · #4 Nov 14th, 2007, 02:24

Your example code is not enough for us to help you further!
We need a complete code (CSS and HTLM) so we could see what the "problem" looks like!

Better if you could host it somewhere as suggested by Alex!

Stuart · #5 Nov 14th, 2007, 02:27

Hmm. It should be:

Code: Select all

#Wrapper {
    background-color: #FFFFFF;
    width: 920px;
    margin-right: auto;
    margin-left: auto;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #bcbcbc;
    border-left-color: #bcbcbc;
    margin-top: 0px;
    margin-bottom: 0px;
}
#Logo {
    float: left;
    height: 65px;
    width: 365px;
    padding-top: 10px;
    padding-left: 15px;
}
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    color: #474f49;
    background-color: #cbcbcb;
    margin: 0px;
}
#Header {
    float: right;
    height: 75px;
    width: 540px;
}
#NavigationBar {
    height: 20px;
    text-align: center;
    font-weight: bolder;
    padding-top: 5px;
    padding-bottom: 5px;
}
#NavigationContent {
    width: 920px;
}
#SearchBar {
    padding-top: 10px;
    padding-bottom: 5px;
    text-align: center;
    width: 920px;
}
#SearchBar #form1 {
    margin: 0px;
    padding: 0px;
}
#SearchBar #form1 input {
    width: 320px;
    border: 1px solid #000000;
}

#divSearchBar requires the use of: id="divSearchBar". I think you mean to target div's but that's not how... Targeting div's can be done with id like this:

Code: Select all

div #NameOfElement {
styles: whatever;
}

<div id="NameOfElement"></div>

And with class like this:

Code: Select all

div.NameOfElement {
styles: whatever;
}

<div class="NameOfElement"></div>

Hope that helps!

Cheers

Monie · #6 Nov 14th, 2007, 02:31

So you have plenty of "free" time, huh? lol

Stuart · #7 Nov 14th, 2007, 02:35

What do you mean? I just copied his code, pasted it into my post, and deleted "div" from in front of the css styles... It took 10 seconds!

Monie · #8 Nov 14th, 2007, 03:09

I use to see the result page before seeing the code! lol
That way I can "see" the problem and started to visualize the code behind it!

Stuart · #9 Nov 14th, 2007, 11:34

Ah. I don't do it that way. I usually can't tell by looking at the result. I have to work with code...

kee2ka4 · #10 Nov 14th, 2007, 15:16

I don't have the html code with me right now, its in my home pc but I will post code when I go home in the evening. Thanks for all the replies.

Regards,
Ket

kee2ka4 · #11 Nov 14th, 2007, 20:21

Here is the HTML code

HTML: Select all

<!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>::Project::</title>
<link href="css/master.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="divWrapper">
    <div id="divHeaderContent">
        <div id="divLogo">Logo Goes Here</div>
        <div id="divHeader">header goes here</div>
    </div>
    <div id="divNavigationContent">
        <div id="divNavigationBar">Home | My Music | My Video| My Photo </div>
        <div id="divSearchBar">
        <table width="303" border="0">
              <tr>
                <td width="86"><div align="center"><strong>SEARCH:</strong></div></td>
                <td width="182"><form id="form1" name="form1" method="post" action="">
                  <label>
                    <input type="text" name="textfield" />
                     </label>
                </form>
                </td>
                <td width="21"><img src="images/b_go.gif" width="21" height="19" /></td>
              </tr>
        </table>
        </div>
    </div>
    <div id="ContentWrapper">
        <div id="MainContent">Main Content</div>
        <div id="RightContent">Right Content</div>
    </div>
    
</div>
</body>
</html>

Thanks for all the Help,

Stuart · #12 Nov 14th, 2007, 22:00

OK, so remove "div" from in front of the ids and use the css I posted above. However, if you want to keep the html the way it is, just match up the css names with the ids.
Cheers

Monie · #13 Nov 15th, 2007, 00:55

Quote:

Originally Posted by monie

Your example code is not enough for us to help you further!
We need a complete code (CSS and HTLM) so we could see what the "problem" looks like!

Better if you could host it somewhere as suggested by Alex!

Yes! I agree with myself

Quote:

Originally Posted by swagner

What do you mean? I just copied his code, pasted it into my post, and deleted "div" from in front of the css styles... It took 10 seconds!

Quote:

Originally Posted by swagner

Ah. I don't do it that way. I usually can't tell by looking at the result. I have to work with code...

That is why you get a problem from the existing problem!
The solution to the problem actually not from deleting the div in the CSS ID selector!

As you can see from his HTML:

HTML: Select all

<div id="divWrapper">

and the related CSS:

HTML: Select all

#divWrapper {
   some style here...;
    }

I don't see any problem there! Well maybe just a confusing way to do it!

Ok, the problem is all about your positioning, element width, and some id that don't have CSS styled to it! Eg, you have this in your HTML:

HTML: Select all

    <div id="ContentWrapper">
        <div id="MainContent">Main Content</div>
        <div id="RightContent">Right Content</div>
    </div>

but I don't see any CSS style assigned to it?

What you want is something like this:
HTML File:

HTML: Select all

<body>
<div id="divWrapper">
    <div id="divHeaderContent">
        <div id="divLogo">Logo Goes Here</div>
        <div id="divHeader">header goes here</div>
    </div>
    <div id="divNavigationContent">
        <div id="divNavigationBar">Home | My Music | My Video| My Photo </div>
        <div id="divSearchBar">
        <table id="divSearch" width="303" border="0">
              <tr>
                <td width="86">SEARCH:</td>
                <td width="182">
                <form id="form1" name="form1" method="post" action="">
                    <label>
                        <input type="text" name="textfield" />
                    </label>
                </form>
                </td>
                <td width="21"><img src="images/b_go.gif" width="21" height="19" /></td>
              </tr>
        </table>
        </div>
    </div>
    <div id="ContentWrapper">
        <div id="MainContent">Main Content</div>
        <div id="RightContent">Right Content</div>
    </div>
</div>
</body>

ans your CSS File:

HTML: Select all

    #divWrapper {
    background-color: #FFFFFF;
    width: 920px;
    margin-right: auto;
    margin-left: auto;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #bcbcbc;
    border-left-color: #bcbcbc;
    margin-top: 0px;
    margin-bottom: 0px;
    border: 1px solid red;
    }
    #divLogo {
    float: left;
    height: 65px;
    width: 380px;
    padding-top: 10px;
    padding-left: 15px;
    border: 1px solid blue;
    }
    body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    color: #474f49;
    background-color: #cbcbcb;
    margin: 0px;
    }
    #divHeader {
    float: right;
    height: 75px;
    width: 480px;
    border: 1px solid yellow;
    }
    #divNavigationBar {
    height: 20px;
    text-align: center;
    font-weight: bolder;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 2px solid black;
    clear: both;
    }
    #divNavigationContent {
    width: 920px;
    border: 1px solid green;
    }
    #divSearchBar {
    padding-top: 10px;
    padding-bottom: 5px;
    text-align: center;
    width: 920px;
    border: 1px solid black;
    }
    #divSearchBar #form1 {
    margin: 0px;
    padding: 0px;
    border: 1px solid pink;
    }
    #divSearchBar #form1 input {
    width: 320px;
    border: 1px solid #000000;
    border: 1px solid red;
    }
    #divSearch {
        border: 1px solid red;
        margin: 0 auto;
    }
    #MainContent {
        width: 70%;
        height: 500px;
        float: left;
    }
    #RightContent {
        width: 30%;
        height: 500px;
        float: right;
    }
    #ContentWrapper {
        width: 100%;
        border: 1px solid black;
        overflow: auto;
    }

You might want to check your css if it's validates. I don't have enough time to check them. and for future purpose, don't name your div element like this: <div id="divHeader">, just name them <div id="Header">. It will be confusing and I am sure someone will explain to you later..

Hope that helps you..
Cheers..

Stuart · #14 Nov 15th, 2007, 01:02

Quote:

Originally Posted by monie

And for future purpose, don't name your div element like this: <div id="divHeader">, just name them <div id="Header">. It will be confusing and I am sure someone will explain to you later..

This is what I meant when I said, remove the "div"s from in front of the style names. I think they were there because kee2ka4 was trying to target divs. Like this:

Code: Select all

div #Header {
styles: whatever;
}

Hope that makes it clear...

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
div "SearchBar" doesn't display properly in firefox