20 replies [Last post]
tvoq
Offline
newbie
Last seen: 16 years 37 weeks ago
Timezone: GMT-5
Joined: 2005-05-09
Posts: 8
Points: 0

Hi all,

I am working on my personal website, and I am having trouble with a couple of things.

Here is a link to my template http://www.ilinas.com/new/

The bottom div is the problem. It appears in Firefox just fine but disappears in IE.
I am not too advanced in CSS and this is my first CSS-only design, so I may have missed something.

Also, in Firefox I have this problem: When I set the padding of a div like this for example {padding: 20px 0px 0px 0px} it reflects the padding on the bottom, even though I have specified it to be zero. This happens with divs that have their height specified.

Is this a common problem? I have had that happen before. Here I worked around that by creating two divs, one for the box (specifying height) and one for the text (specifying the padding). Is there a more accepted way to do that?

Thanks in advance for your help.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

My personal website - disappearing div

Without looking any further than the top line, I can tell you you're in quirks mode. You need a full doctype. See here:
http://hsivonen.iki.fi/doctype/

Also, if you're developing the page new you really ought to be using a strict doctype. And why, oh why did you do this:

<div id="top1">
    	   <a href="#" class="toplinks">Blog</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="art.htm" class="toplinks">Art</a>&nbsp;&nbsp;&nbsp;<a href="design.htm" class="toplinks">Design</a>&nbsp;&nbsp;&nbsp;<a href="pictures.htm" class="toplinks">Pictures</a>&nbsp;&nbsp;&nbsp;<a href="articles.htm" class="toplinks">Articles</a>&nbsp;&nbsp;&nbsp;<a href="photoblog.htm" class="toplinks">Photoblog</a>&nbsp;&nbsp;&nbsp;<a href="goodies.htm" class="toplinks">Goodies</a>

    	</div>

You shouldn't need a non breaking space for layout ever again. Not with CSS. And I'd be willing to bet you don't need to class every link in the menu.

I'll look further into the problem after my dinner Wink

VERY nice design btw

tvoq
Offline
newbie
Last seen: 16 years 37 weeks ago
Timezone: GMT-5
Joined: 2005-05-09
Posts: 8
Points: 0

My personal website - disappearing div

Ai ai... and I thought I was making progress with my CSS skills!

When I put the strict CSS doctype everything looks very messed up... I am a little confused after looking at this link. I don't mean to sound too ignorant, but which doctype should I use?

Also, I hope you don't mind telling me how to do the top menu without the nbs? I suppose it's with <li>, I should have looked into that more, but then I had to leave this huge break in order to surround the flower so I thought nbs it would be. Especially because I had no idea how to deal with the padding issue in that same div...

Thanks for your help so far wolfcry911, and for your compliment on my design Smile

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

My personal website - disappearing div

You're CSS is looking fine - don't get down on yourself. Lets work through this. The full doctype I recommended is truly the way to go. It's far better to design to standards than not (quirks). If everything is messed up, it will be far better to correct it now, than to continue coding the way you have been. The people on this forum, myself included, will be more than happy to help you with your efforts. I'm looking things over now...

btw, you don't have to go to strict, but I strongly recommend at least the full doctype with url (which will put you standards mode). You can still be in standards mode with a transitional doctype. But if you're developing new, why not conform to standards and use strict?

:roll: I'm beginning to sound like a preacher with all this standards talk...

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

My personal website - disappearing div

Okay, when you put in a full doctype, you mentioned that things get messed up - what specifically? I'm betting the right division appears too low. It's the order of the source code and the floats.

On another topic, Here's how I would code the navbar:

<ul id="topnav">
  <li id="wide"><a href="#">Blog</a></li>
  <li><a href="art.htm">Art</a></li>
  <li><a href="design.htm">Design</a></li>
  <li><a href="pictures.htm">Pictures</a></li>
  <li><a href="articles.htm">Articles</a></li>
  <li><a href="photoblog.htm">Photoblog</a></li>
  <li><a href="goodies.htm">Goodies</a></li>
</ul>

and the styling for it:

ul#topnav {
	margin: 40px 0 0 10px;
	padding: 0;
	list-style-type: none;
	}
#topnav li {
	float: left;
	margin: 0;
	padding: .1em 1em .1em 0;
	}
#topnav li a {
	font: 12px bold all-caps "Times New Roman", Times, serif;
	color: ecdebd;
	text-decoration: none;
	}
#topnav li a:hover {
	color: #fff;
	text-decoration: underline;
	font-weight: bolder;
	}
li#wide {
	width: 140px;
	}

And do away with the entire #top1 division.

Let's see how things are going thus far...

Root
Offline
Enthusiast
Brighton UK
Last seen: 14 years 50 weeks ago
Brighton UK
Joined: 2004-09-08
Posts: 76
Points: 0

Padding Needed

Next up your padding. This is very hazardous in CSS for two reasons. One is the collapsing margins phenomena where contigious margins without borders in the vertical plain override each other. Secondly on anything with a fixed width or height Firefox and IE do the calculations in <em>exactly opposite </em> ways. One will add padding and borders to the width/height declared. The other will subtract. For good measure IE will also handle margins erratically. It needs a bit of reading and trial and error to really get straight. But good luck.

No class, little style and a lotta division.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

My personal website - disappearing div

Root, in standards mode IE will behave correctly in adding the padding, border and margin to the content width. That's why I'm strongly suggesting the full doctype.

tvoq
Offline
newbie
Last seen: 16 years 37 weeks ago
Timezone: GMT-5
Joined: 2005-05-09
Posts: 8
Points: 0

My personal website - disappearing div

Wow! Awesome! I am learning a lot here.

I copied the ul-li code and it looks perfect in IE. Something is wrong in Firefox though, now I am trying to figure out what, I might nave missed something.

Here is a link to the page with the new navigation:
http://www.ilinas.com/new/indexnav.htm

And also here is a link to the page with full doctype, it gets a little messy (visually):
http://www.ilinas.com/new/index1.htm

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

My personal website - disappearing div

Okay, great - you have two pages now for testing. That's good. On the page with full doctype we can correct the main problem by adding this to the CSS:

html, body {height: 100%}

And here's the reason why: http://www.quirksmode.org/css/100percheight.html

And then we can tackle the nav problem next...
One thing to change before addressing the problem is the padding in the li - make this change:

#topnav li { float: left; margin: 0; padding: .1em .8em .1em 0; }

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

My personal website - disappearing div

And then have a read here:

http://www.researchkitchen.de/blog/archives/css-autoheight-and-margincollapsing.php

This explains what Root was getting at. The simple solution is to add a small padding to the top div (and decrease the ul's margin by 1).

So change the padding in #top to:
padding: 1px 0;

and the margin in the #topnav ul to:
margin: 39px 0 0 10px;

tvoq
Offline
newbie
Last seen: 16 years 37 weeks ago
Timezone: GMT-5
Joined: 2005-05-09
Posts: 8
Points: 0

My personal website - disappearing div

This code
html, body {height: 100%}
worked like magic.
it looks great in Firefox now. Still a little messed up in IE. But at least in IE the bottom div appears, whereas before it was totally gone. Only that it goes to the right for some reason. I think all this in IE has something to do with the top menu, what do you think? Because here http://www.ilinas.com/new/index1.htm it looks like top navigation is pushing everything, for some reason the font family style was not applied and it all inverited verdana instead of times new roman... and that made the letters larger.

Do you think that's what the problem is? I wonder why it is not applying the font family style?

Root
Offline
Enthusiast
Brighton UK
Last seen: 14 years 50 weeks ago
Brighton UK
Joined: 2004-09-08
Posts: 76
Points: 0

Standards

As I understand it the difference between Firefox and IE in applying the Box Model do not have anything to do with the quirks mode or the doc type. The two browsers simply interpret the thing differently even when they are both following standards. The doc type *causes it all* thing is a fallacy - much loved - but untrue. And OT much as I love FF; in this instance I am inclined towards the MS interpretation of the width.

No class, little style and a lotta division.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

My personal website - disappearing div

Root, you're statement is simply untrue. Please do some research and you'll discover that IE in standards mode will follow the correct box model. IE5 for Windows (not Mac) will incorrectly botch the box model regardless of mode. But, developers should design with standards and then, if they must design for outdated, non standard browsers, make accomodations for them.

Doctype switching is not a fallacy. And the standard box model width makes perfect sense - it's the content width, not the border width. Microsoft's own interpretation was flawed. It had to change with certain elements (like image) to accept the border and margin as outside the width (whereas normally just the margin would be outside the width). At any rate, Microsoft now accepts the w3c's recommendation as standard.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

My personal website - disappearing div

tvoq,

You've declared the fonts wrong in .toplinks and #topnav

for example:
#topnav li a { font-family: "Times New Roman, Times, serif"; font-size: 12px; color: #ECDEBD; text-decoration: none; font-weight: bold; font-variant: small-caps; }

should be:
#topnav li a { font-family: "Times New Roman", Times, serif; font-size: 12px; color: #ecdebd; text-decoration: none; font-weight: bold; }

Notice the placement of the closing quotation in the font-family. The quotes are used to enclose a font with a multiple word name, not the entire font list. So IE was correctly looking for a "Times New Roman, Times, serif" font, which of course, doesn't exist so it defaults to it's inherited font (Verdana, I think in this case).

Make that correction and then we'll continue...almost there.

tvoq
Offline
newbie
Last seen: 16 years 37 weeks ago
Timezone: GMT-5
Joined: 2005-05-09
Posts: 8
Points: 0

My personal website - disappearing div

Oh, got it. Thanks!

The fonts look good now: http://www.ilinas.com/new/index1.htm

But it is still pushing the right div and the bottom div in IE..

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

My personal website - disappearing div

Okay, in the html change the source order. Move the entire right division up to be in between the left division and the main division.

tvoq
Offline
newbie
Last seen: 16 years 37 weeks ago
Timezone: GMT-5
Joined: 2005-05-09
Posts: 8
Points: 0

My personal website - disappearing div

It looks very messed up like this... are you sure? Do I need to do something else if I change the order?

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

My personal website - disappearing div

I forgot to mention to change the #right from float: left to float: right

Wait- you're right. I made a mistake. I didn't see that #main was floating left; Leave the source order the way you had it and leave #right to float: left;

So where do you stand now? I'm at home today and don't have a PC for testing, just a Mac. Have you changed the navbar source? What is IE/PC doing? Everything looks good in Firefox with the exception of the footer, which we'll address last - I have a couple of questions about it.

I just quickly looked at the footer - for me in FF/Mac it's the left: 269px; in the #btm that's throwing it off. It should be 0. But like I said, we can tackle that last.

tvoq
Offline
newbie
Last seen: 16 years 37 weeks ago
Timezone: GMT-5
Joined: 2005-05-09
Posts: 8
Points: 0

My personal website - disappearing div

Ok... I had forgotten that code from before...
So I changed the btm <div> to:
left: 0
position: relative

and here is how it looks now on PC. (attaching screenshot of both IE and FF, and also the new link is here:

http://ilinas.com/new/index-all.htm

tvoq
Offline
newbie
Last seen: 16 years 37 weeks ago
Timezone: GMT-5
Joined: 2005-05-09
Posts: 8
Points: 0

My personal website - disappearing div

ops, here's the screenshot

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

My personal website - disappearing div

Hi again,
the position: relative; should be placed on the #container and the btm should have position: absolute; (for now - it may change depending on how you want to do things, but lets fix that bad float in IE first.

I'm thinking that IE doesn't believe there's enough room in the #container for that last float (#right div). Just for a test, increase the container width to 803px and see if IE corrects the right div. What it may be doing is adding a 3px margin or padding to the image in that division (incorrectly of course). Give it a try and see. Also add padding: 0; to the #right.