I know I'm a newbie here but

1

Hi,

I know i’m a newbie here but I have had experience with CSS before and decided to make myself a new website design (view it here). My issue is with the differences in IE and Firefox (screenshots attached).

IE seems to show a vast quantity (~300px) of whitespace at the bottom of the page, and firefox seems to limit the text width in the bottom box on my layout (the one called Wall Thingy).

Any help will be appreciated!

Myles

2

your footer div is in the middle of your code

put all your text into <p></p> tags at least

don’t just stick them in a div

also, do not use absolute positioning techniques (top: —; bottom: —; ) if you define position: relative

avoid any absolute positioning all together, this is a simple layout to accomplish with floats

http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

3

[quote=fasterthanlight™;2340851]your footer div is in the middle of your code

put all your text into <p></p> tags at least

don’t just stick them in a div

also, do not use absolute positioning techniques (top: —; bottom: —; ) if you define position: relative

avoid any absolute positioning all together, this is a simple layout to accomplish with floats

http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html[/quote]

My Footer Div is in the middle so that it flows with the order of my stylesheets, the rest of the content is within a containing div.

I havent put my text in <p> tags for the moment as it is just placeholder text for the moment. <p> tags also makes my text move down a few pixels, which makes the design need modification.

Finally, I have attempted it with floats but it causes compatiblilty issues with the school browsers (IE6, yay!)

Thanks

4

No, don’t do that.

Browsers interpret HTML in a top-down fashion

your footer being in the middle of the HTML is definitely giving IE headaches.

There is no direct link between how your HTML is layed out and how your CSS is layed out. The only thing that causes problems with CSS and render-order is if you have an element near the top of your style sheet that says one thing, and then you override it further down with another.

Like I said, you can have your footer CSS at the top of your style sheet and everything will still work.
HTML does not work like that, it is the structure, think of it like a human, you mess up your bone structure, you get wonky humans, but your CSS is the skin, so it will still look “normal”

Remove default margins via CSS for your p tags

Fixing glitches with IE is going happen no matter what method you do, save yourself the headache in the long run when you need to update your content, by using floats

Also, you can’t just add floats to a layout you’ve made with absolute positioning and expect it to work.

You need to re-build it from the ground up, it seems daunting, i know, but its worth it, trust me

5

My problem is that i first attempted this design with floats, and resorted to relative positioning to make it work. I have moved the footer code now, which has sorted some problems out, and allowed me to remove about half of my positional stuff, thanks.

Do you have any ideas about why FF decides to show the bottom text box only 128px wide?

6

relative positioning IS floating

Put your footer text into <p></p>'s to see if the width gets fixed, and use this:

  • p { margin: 0; padding: 0; }

put that at the TOP of your CSS file, as you will probably need to add padding to other <p>'s later on

7

All solved by totally recoding the page. Im using just floating and margins now. Its simpler for both me and the end user. It can be viewed here (new url)

Many Thanks.

8

you don’t need to define a 100% width on your #wrapper, its giving me a horizontal scroll bar

also, add

body { margin: 0; padding: 0; }