nested div / table in a div question

iamnotniles · Post by **iamnotniles** » July 2nd, 2003, 4:25 pm

copied this from evamgelism. I'm not usually down at these parts so I'm not sure how they work.

Ok, I'm trying to get something like this to work for my website

<img src="http://www.hymagumba.freeserve.co.uk/uploads/homepage-want.jpg">

Now that is a table

table width=100%
tr
td width=50% - td width=50%

and it's nested in a layer which is fluid with a layer on either side. Now it works fine in Mozilla but in IE it reads 50% as of the page and not as of the layet resulting in this

<img src="http://www.hymagumba.freeserve.co.uk/uploads/homepage-get-ie-table.jpg">

Now I've tried in CSS to do this and have something similar working in Mozilla but I can't get my nice white lines between the blocks and IE once again reads 50% of the oage.

Any workarounds or fixes people can suggest?

Many thanks
Pete

old momokatte · Post by **old momokatte** » July 3rd, 2003, 12:30 am

It all depends on how you're defining and positioning your containing blocks (left menu and table).

Do you have a live page for people to look at? We can't help you very well with just a screenshot; there's a dozen different ways you could have coded that layout.

As for the white borders, make sure you have a measurement unit defined in your CSS declarations, like '1px solid #FFFFFF' instead of just '1 solid #FFFFFF'.

iamnotniles · Post by **iamnotniles** » July 3rd, 2003, 3:32 am

That would make more sense really to upload it. Posting at midnight - long day.

ok, this is the CSS based page
http://www.hymagumba.freeserve.co.uk/up ... -css.shtml

and this is the one with the table
http://www.hymagumba.freeserve.co.uk/up ... able.shtml

and the stylesheets used are
http://www.hymagumba.freeserve.co.uk/fu ... ucture.css
http://www.hymagumba.freeserve.co.uk/fu ... global.css
http://www.hymagumba.freeserve.co.uk/fu ... css/hp.css

with regards to the borders I tried what you suggested yesterday but it seemed to add to the outside of the boxes and made them all overflow onto new lines and stuff.

hope all this is helpful.
Pete

old momokatte · Post by **old momokatte** » July 3rd, 2003, 7:45 am

Bleh. As far as I can tell, MSIE has a bug or some really quirky CSS issues. If you give '#content' a width of 100%, the DIV actually shrinks to the expected size and the TABLE matches its width. Of course, doing this also causes it to grow to 100% of the page width in Gecko.

So...unless you do a CSS tweak for MSIE (server-side or client-side), the DIV / TABLE thing probably isn't going to work without a major change to the layout.

As for the float-based layout, I won't touch it. Using floats for symmetric row/column layout is a major pain in the ass and the smallest thing can throw the layout totally out of wack.

Anyways, that's just my opinion. Someone else might have totally different ideas about layout and know exactly how to help you fix this. I can help you with a few other things, though:

1) In the CSS for '#leftmenu', the 'float: left' is totally ignored (and should be removed) because it is not a valid attribute for an absolute-positioned element.

2) In your 'navibar' DIV, you should not use   to pad the links; use CSS padding instead. (e.g. in '#navibar a', add 'padding: 5px 10px;')

3) Also in the 'navibar' DIV, do not use a transparent GIF for padding; use CSS. (e.g. in '#navibar', add 'padding: 5px 27px;')

Hymagumba wrote:with regards to the borders I tried what you suggested yesterday but it seemed to add to the outside of the boxes and made them all overflow onto new lines and stuff.

That's because Gecko preemptively follows the CSS3 box-sizing recommendation, which places borders and padding outside the content-width by default (except for tables, which have different rules). It says this behavior is defined in CSS2, but I haven't seen it clearly defined in that manner until the CSS3 recommendation for a 'content-box' default. Opera also does this in standards-compliance mode.

iamnotniles · Post by **iamnotniles** » July 4th, 2003, 1:03 am

Ah well - thanks anyways, I'll see if I can play around with tables.

Thanks for the CSS tips, it's ages ago since I made those bits, long before I got the hang on CSS.

However when it comes to

momokatte wrote:3) Also in the 'navibar' DIV, do not use a transparent GIF for padding; use CSS. (e.g. in '#navibar', add 'padding: 5px 27px;')

I've tried doing that and did when I first made the stylesheet however it makes Mozilla gain a scrollbar at the bottom of the window which looks ugly.

I've shrunk the transfarent gif down to 17px now as of the other padding but I can't get the CSS to pad how I want without having that horrible scrollbar.

yurk · Post by **yurk** » July 4th, 2003, 4:09 am

Don't know if it can help here but I just fixed a quirky rendering in IE by removing the unnecessary xml declaration on the first line (see the addendum at http://tantek.com/CSS/Examples/boxmodelhack.html )

iamnotniles · Post by **iamnotniles** » July 4th, 2003, 8:42 am

yurk wrote:Don't know if it can help here but I just fixed a quirky rendering in IE by removing the unnecessary xml declaration on the first line (see the addendum at http://tantek.com/CSS/Examples/boxmodelhack.html )

oh my god - that worked perfect. I wonder why IE does that. I think it must think the page is a "real" XML page and not an HTML page or something as it's always moaned at me when I tried to open them offline.

I thought that the xml declation was needed though - I read it on W3 or A List Apart or somewhere like that.

Thanks to both of you.

*goes to shout at IE for being odd*