CSS Forum

**basu** · 01:55 PM

Firstly, thanks for any help or advice, I really appreciate it! I've tried all that I know and I turn to you all for help.

The Visual:

http://basuworld.home.insightbb.com

The Problem:

The Layouts won't look the same in FF and IE, of course!
The ideal layout is working alright in FF.
I've tried as many work-arounds that I know but I can't understand what is causing these errors:

1. Lack of space between modules in the left column

I tried adding margins, padding, but nothing seems to be making it work. They're glued together. Maybe it's something to do with my use of absolute positioning?

2. When I refresh the window in IE, the borders around the footer disappear

Now this is just bizarre. When the window first loads up, the border around the footer is MIA. If I switch windows and come back, the border is there but then disappears as soon as I hit refresh. This one just has me at a loss for words.

3. The blank space above the wrapper, where it says "news"

Again, tried everything I could think of but had no success. It's also limiting the border. I've been having this problem with IE for a while at random points. I know display: inline fixes double margining in floats, but does this happen otherwise as well?

Last Comments:

So I tried to be as organized as possible, sorry if I'm overwhelming anybody with words. The source and the css are listed below. Also, I wasn't sure if I should be creating a new topic because I had a thread a few months back. If there is a better way for me to do this, then please let me know!

Lastly, if anybody has any comments or suggestions about the organization and methods of my html and css, I would love to hear a better/more proper way to go about it.

So thanks again to anybody who reads the topic and super thanks to anybody who can help out!

The Source: (most <br> are just to add some blank space)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>

<head>
<title>Wusota</title>
<link rel=stylesheet href="style.css" type="text/css">
</head>

<body>

<div id="container">

<div id="header">
Wusota
</div>

<div id="navigation">
<ul>
<li>Home</li>
<li>Events</li>
<li>Calendar</li>
<li>Committees</li>
</ul>
</div>

<div id="navdesc">
Small Paragraph describing the links
<br><br>
</div>

<div id="wrapper">

<div id="column">

<div class="title">
Upcoming Events
</div>
<div class="interior">
asldfkjalsdkfjalskdjfasdlkfjaslj<br>

alksdjfals;kdjfalskdjfalskdfjals;kdfj<Br>

<Br><br>
</div>

<div class="title">
Quick Calendar
</div>
<div class="interior">
yeah.... a bigg ole calendar
<br><br><br><br>
</div>


</div>

<div id="bulkcontent">

<h1>News:</h1>
<p>
Here is a news update
</p>

</div>

<div id="footer">
footer
</div>

</div>




</div>

</body>

</html>

The CSS:

Code:

body {
color: red;
text-align: center;
}

#container {
width: 780px;
margin: auto;
text-align: left;
position: relative;
}

#header {
font-size: 36px;
font-weight: bold;
}

#navigation { 
font-family: Verdana;
font-size: 11pt;
font-weight: bold;
float: right;
border: 1px solid #000;
border-bottom: 0px;
}
    
#navigation ul {
padding: 0px;
margin: 0px;
}

#navigation li {
display: inline;
list-style: none;
}

#navdesc {
clear: right;
float: right;
background: red;
color: white;
width: 529px;
_width: 780px;
padding-left: 250px;
border: 1px solid black;
border-left: 0px;
}


#wrapper {
clear: right;
color: blue;
border-right: 1px solid #000;
margin: 0;
}

#column {
float: left;
width: 225px;
position: absolute;
top: 80px;
left: 10px;
}

.title {
border: 1px solid #000;
border-bottom: 0px;
background: red;
color: white;
}

.interior {
border: 1px solid #000;
border-top: 0px;
margin-bottom: 10px;
background: white;
}

#bulkcontent {
margin-left: 250px;
padding: 0px;
}

#footer {
border: 1px solid #000;
border-left: 0px;
text-align: center;
border-right: 0px;
}

**travelagent** · 01-07-2007, 11:11 AM

First thing I noticed immediately was your site doesn't have the required <!DOCTYPE> declaration nor do you have any meta tags -- work on fixing those first, and look at it again.

**basu** · 01-07-2007, 01:53 PM

Ah, yes, I keep forgetting about that, probably because I have no clue what it does.

I researched it and I inserted the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Is this appropriate? I checked my file again and there was no difference. Just a quick question,
does having the doctype heavily affect the html?

As for the meta tags, that is more for content and the web browsers, right? If so, I will definitely
go about adding them in once I'm actually working on content.

Thanks a lot for the input, I really appreciate it.

**travelagent** · 01-07-2007, 02:22 PM

You need to try different Doctypes until you see a change -- the complete list can be found in W3C

Meta tags are for the SE's to crawl and index your site properly.

**LadynRed** · 01-07-2007, 05:45 PM

Your layout isn't right in FF either. Your wrapper is not containing your left column at all, and part of that is because of absolute positioning. You don't need it, just leave it floated. Absolutely positioned elements are completely outside the flow of your document, affected by no other elements on the page.

The 2nd problem is that you must properly CLEAR your floats, just using clear: right or both usually doesn't work well.

You should also get into the habit of zeroing out the margins and padding on the body and other elements, then set them on each element as necessary. This makes it easier to debug because you're not fighting the default margins and padding.

I would suggest you not float #navigation, but float the UL inside it instead to get it over to the right.

Rather than using a div for your column titles, use a proper heading and style the heading with the red background, font size, etc.

Here's the changes I made using these suggestions:

Code:

body {
color: red;
text-align: center;
margin: 0;
padding: 0;
font: 101.1% Verdana, sans-serif;
}

h1, h2, h3, h4, #wrapper, #container, #column{
    margin: 0;
    padding: 0;
}

#container {
width: 780px;
margin: 0 auto;
text-align: left;
position: relative;
font-size: 80%;
}

#header {
font-size: 200%;
font-weight: bold;
padding: 0 0 10px 0;
}

#navigation { 
font-weight: bold;
/*float: right;*/
/*border: 1px solid #000;
border-bottom: 0px;*/
}
    
#navigation ul {
float: right;
padding: 0px;
margin: 0px;
}

#navigation li {
display: inline;
list-style: none;
padding: 2px 10px;
}

#navdesc {
background: red;
color: white;
border-bottom: 1px solid black;
}
#navdesc p{
    text-align: right;
    margin: 5px;
}


#wrapper {

color: blue;
width: 780px;
margin: 0;
background: #C6FEFF;
height: 300px;
margin: 0;
padding: 0;
}

#column {
float: left;
width: 225px;

}

#column h2{
    background: red;
    font-size: 90%;
    margin: 5px 0;
    padding: 3px;
    color: white;
    border-top: 1px solid #000;    
}
#column p{
    margin: 5px;
}

.title {
border: 1px solid #000;
border-bottom: 0px;
background: red;
color: white;
margin-top: 10px;
}

.interior {
border: 1px solid #000;
border-top: 0px;
margin: 0px 0;
background: white;
}

#bulkcontent {
margin-left: 250px;
padding: 0px;
}

#footer {
border: 1px solid #000;
border-left: 0px;
text-align: center;
border-right: 0px;
}
.brclear{
    clear:both; 
    height:0; 
    margin:0; 
    font-size: 1px; 
    line-height: 0; 
} 

</style>
</head>
<body>

<div id="container">

        <div id="header">
        Wusota
        </div>

    <div id="navigation">
        <ul>
        <li>Home</li>
        <li>Events</li>
        <li>Calendar</li>
        <li>Committees</li>
        </ul>
    </div><!-- end navigation -->

    <div id="navdesc">
    <p>Small Paragraph describing the links</p>
    <br />
    </div> <!-- end navdesc -->

<br class="brclear">

    <div id="wrapper">

    <div id="column">

    <div class="interior">
    <h2>Upcoming Events</h2>
    
        <p>Lorem ipsum dolor sit amet, sagaciter tristique incassum nulla gilvus, eu macto. Comis virtus bene reprobo saepius sino luptatum, typicus ex ventosus, feugait, regula ut zelus. Valde abluo vero exerci feugiat in et facilisi tation, consequat loquor ullamcorper regula opto. Eu utrum scisco tum wisi 
        </p>


        </div>

        <div class="interior">
        <h2>Quick Calendar</h2>

        <p>yeah.... a bigg ole calendar</p>

        </div>

    </div> <!-- end column -->

    <div id="bulkcontent">

        <h1>News:</h1>
        <p>Here is a news update</p>

    </div> <!-- end bulkcontent -->
    <br class="brclear" >
    </div> <!-- end wrapper -->
    
    
        <div id="footer">
        footer
        </div>



    </div> <!-- end container -->

</body>
</html>

**basu** · 06:16 PM

Sorry for the delay in my reply. Thanks for the input Lady, I really appreciate it. I think i'll take your tips into account and basically follow your methods.

At first I was trying to have the floated content in front of the other content, which I realize now is just kinda weird. I'm just going to stick with floated content within the flow. Though when I checked it the Nav <ul> is half in the paragraph below it. I think I can fix it, but in case there is something weird in the way I am looking at it I thought I would mention it.

Also, I'm using php files now and i'm wondering if there is a specific doctype for that, or do i still use an html 4.01 doctype?

Thanks again!

**LadynRed** · 01-17-2007, 12:42 PM

Nope, no doctype for PHP, just use a standard HTML doctype.