Firefox DIV issues - alignment

In a new directory im creating here:

http://www.limitlesslinks.com/about.php

The page is all div id and css. It works fine in IE, but in firefox its not showing the left hand border and I think thats throwing it all out.

Here is what I think is the relevant CSS

So essentially I have 5 columns leftborder, leftcontent, centerbreak (that camel colour strip) right content and right border.

Dont worry about checking any other pages on the site...its only about.php that im fiddling with atm.

 

Hm. I'm scratching my head here to understand how this layout is made. The HTML and CSS seems to be "overkill" (lot's of hacks) for something that should be an easy design, this is just a two column layout from what I can see.

Anyway, from what I can see you are not using Faux columns, are you? Personally I would use that instead of rightbg.jpg and leftbg.jpg. Then you can also remove leftborder and rightborder from your CSS and HTML if I have understood your CSS/HTML correctly.

Since you wrote dont worry about checking any other pages I presume you know that centering is breaking on all pages.

 

Not sure about overkill. Its only 5 columns and its only that way because I have a left and right border stretching the of the main content areas. Those hacks are only there for backwards compatability...the example css above only has 1 hack in it...

Ill check that URL you provided though, to cut it down a bit...the actual HTML code ive used is very very minimal...

And nah i havent even looked at the other pages yet.

 

I took a look at the original CSS (from /* Start Mac IE5 filter \*/), my "overkill" comment was based on that. If you use the faux column concept you can remove some of those hacks and reduce the number of columns. Fewer hacks + less columns = less problems IMHO.

I hope you don't got offended, that was not my intention.

 

Ya ive taken a look at that technique on ALA, and its perfect for what I need so thx for that...although it doesnt really go into detail about the exact CSS...I should be able to figure it out.

Nah im not offended at all Thx for the link.

My birthday is coming up, so ive decided a might get a couple XHTML and CSS related books from Amazon. I really just want to get to the stage where I can create nice templates and perhaps sell a few.

Im getting better at Photoshop now...really coming to grips with using it, but not the advanced stuff yet. Might pick something up on that as well.

 

The CSS should be really straightforward I think. Create a image as described in the article, and place it in your wrapper (I guess) with CSS.

#wrapper {
background: url(myfauxcolumnimage.gif) repeat-y
}

Happy birthday.

 

Hi Mano

If I could get a little more advice that would be great.

Ive got the faux column technique sorted and you can see the results on the page. Ok 3 problems

1) In Firefox the divs which are overlayed on the background image, leftcontent and rightcontent appear in the correct position.

Im using this code:

The margin: 85px is the clincher. IE clearly doesnt like it...Now ive read about this box model on the site..but I dont really understand it. Will it clear up this problem and whats the code.

2) You can see repeating this background image on the y axis stops nicely before the footer in IE, but in Firefox it continues all the way down and you can just make it out at the bottom. How do I sort that out.

3) Im getting these small little alignment variations between IE and Firefox of like 1 or 2 pixels for the header and footer images....the overall width of both is 911px, and I can get it too work in tables...but oh no..not in CSS. Any help on that is apprecated.

I know its asking a bit..but any help would be great from anyone really.

 

I can try to look closer to the problem later, but this is a design without a flexible width - use px and not %. Remove margin-left and margin-right. I haven't studied your layout too closely, but I don't understand why you are using this.

BTW, should the design be centered or? I'm using a 21" screen and neither header, content, column or footer have matching positions (header and footer matches, but that's all).

 

Ya ill get back to using the px.

It should be centred on about.php, but the rest of the site isnt correct at this point, its a hangover from when I changed from tables to CSS and I havent looked at the other pages, about.php should be correct though. It appears centred on my screen.