Footer jutting out in Firefox - IE even worse!
by Tony March
on
Apr 28, 2009 at 4:47:33 pm
Hi people,
I'm trying to rebuild my portfolio site much nicer than what it is at present. Before I used tables to divide everything, so now I'm looking at CSS and learning more than the last time. I'm getting somewhere, slowly.
I've included some images and I'm hoping I can get some advice or help with a problem I've got.
This is my Dreamweaver scene, everything neat and positioned as it should be, finally got some understanding of Divs, Floating Divs and CSS.
But why is it so different in the browsers?!? I generally use Firefox for previewing. Floating the green 'footer' Div right is the only way I can keep the Div in position, but it just juts out which is very disheartening cos I don't know why, and I'm a bit new to this. It looks even worse in IE with boxes all over the place.
Is there something I'm doing wrong (obviously I am). I've got 6 pages to do for my site, all very similar in layout to this one, and all neatly laid out in PS and ready to be built in Dreamweaver, and its my folio site so I want to do it well, as well as pick up a bit of Dreamweaver on the way :)
I know how you all need to see the code, I've tried publishing to the web but having no joy as yet, so I can provide the code in a text file if anyone needs it. I also began with one of Dreamweavers Templates and modified it to get to this result, so I' think I did right there.
Can anyone advise. I've been scouring through the tutorials and reference and become bogged down, so I thought I'd come here.
<div id="LHstatement">
<p align="right"> CGI and animation, service available
for freelance and contract hire offering
a complete service of 3d visualisation
motion graphics and computer
generated imagery to:</p>
<p align="right"> </p>
<p align="right">Property developers <br />
Architects <br />
Marketing <br />
Web development <br />
CG for television and documentaries </p>
</div>
</div>
Re: Footer jutting out in Firefox - IE even worse! by Tony March on Apr 28, 2009 at 9:31:27 pm
Thanks,I've just uploaded some html code. I did as you suggested so I hope the highlighter I downloaded works. Sorry if it seems like a bit too much code.
Re: Footer jutting out in Firefox - IE even worse! by Fernando Mol on Apr 29, 2009 at 5:57:45 pm
Thanks for the introduction, Richard.
And sorry to be late, Tony.
I'm actually traveling and I have limited time with internet access. The swine flu totally messed up my activities, but I'm OK.
Back to the post, I was going to ask what was your exact problem and created a couple of graphics to explain the different div layouts possible to arrange your content. I will upload the two I finished even if you already solved your problem. Maybe they can be useful to someone else.
The HTML flow goes down with gravity. Every new element appears below the previous one. This is the natural flow.
In the first example two div elements are grouped inside one div, the left column, and the natural flow is broken floating the left column to the left. This way the following elements will continue "around" the floated element.
In the second example the elements look exactly the same but the layout is different. If you need to align the top elements or the bottom ones you can "wrap" them with a div. Every element for the left column is floated so the content align itself.
Am I making any sense?
If you want your footer not to align at the right of your left column you can "clear float" your footer. That way it will continue flowing down with gravity.
Anyway, Tony, I found some garbage in the code you posted, remember always use the "Clean XHTML" tool inside Dreamweaver.
Re: Footer jutting out in Firefox - IE even worse! by Fernando Mol on Apr 29, 2009 at 6:01:49 pm
Also, every browser has his own default margin and padding for every HTML element. It's a good CSS practice to clean those defaults. Use this rule at the beginning of your CSS.
* {
padding:0;
margin:0;
}
You will have to define padding and margin for each element, but this way you'll have no surprises when you change browsers.
Re: Footer jutting out in Firefox - IE even worse! by Tony March on Apr 29, 2009 at 6:57:13 pm
Hi Fernando, thanks for describing that layout, it makes more sense now. I think I could have got away without the absolutely positioned div that contains the four small bottom divs, after your description but I've laid all the pages out now, I'll make a more cleaner effort next time.
I've also made a couple of the four top divs into rollover buttons using css rather than the inserted rollover image method. (It simulates a render bucket). My code page is filling up with CSS now but I'm picking it up quickly and understanding it all.
Q - With this in mind, since I'm creating a lot of css on the page, is it possible to 'export' what I've written to a new linked css file instead, hence removing all the bracketd content thats building up and also updating all references to those css in the code itself.?
Re: Footer jutting out in Firefox - IE even worse! by Fernando Mol on May 1, 2009 at 2:05:42 am
Select your CSS rules in the CSS panel.
Right click.
Select: "Move CSS rules"
In the popup window select "A new style sheet" and click OK
Name your new Style Sheet
Now you can attach that style sheet to every new page. Just remember if you edit those rules your entire site (or at least all HTML files with that style sheet attached) will be updated.
