Tables, divs and browsers

[Cyanoxide]

I’m aware that the majority of different browsers have different presets for tables and I’m also aware that a few properties aren’t registered in internet explored. Normally I wouldn’t use tables at all I would solely use divs but at this stage I have constructed a sort of hybrid between the two.

My dilemma however is that my little hybrid doesn’t show up the way I want it in Chrome and Internet Explore (Most probably in others too) I assume this is because firefox has a default padding setting that is smaller than the others or something like that but I have tried fiddling with the settings that I know of and have not found a way to successfully fix this.

I was just wondering if there was a way to fix it or if I should just scrap it all are redo it strictly in div tags.

I’ll add a link so you can see, as far as I know it runs perfectly in firefox so you’ll have to open it up in other browsers to see the problems. Bare in mind that I haven’t cleaned up the code fully so I doubt very much that it will validate as it stands but either way here is the link:

http://www.cyanoxide.co.uk/boozecruise/index.html

[jayweb]

Zero out tr,td margin and padding at the beginning of your code. Then proceed to change the height elements in some of your classes. That seemed to help.

The only problem left is the footer is a little too far. Screen shot attached.

tr , td{ /* important */
margin: 0px;
padding: 0px;
}

.wine-info {
float: left;
margin: 1px;
background-color: #000000;
height: auto;
width:165px;
}

.wine-price {
margin: 1px;
float: left;
background-color: #000000;
height: auto; /* changed so div background could cover all the elements*/
width:101px;
}

.right-table {
float: left;
height: auto; /*should be autot */
width: 223px;
margin: 1px;
color:#ffffff;
font-size: 9px;
text-align:center;
background-color: #000000 /*set background color from this class*/;
}

.map-table{
height: 281px; /* this height matches up with the other elements */
width: 221px;
background-color: #000000; /* this can be removed*/
float: left;
margin: 1px;
}

.notice{
float: left;
width: 393px;
height: auto; */again changed to auto*/
margin: 0px 1px 1px 3px;
background-color: #000000;
}

[jayweb]

The following seemed to fix footer issue.

.left-table {
float: left;
height: auto; /* updated to auto */
width: 270px;
margin: 1px;
color:#ffffff;
font-size: 9px;
text-align:center;
}

Also stuck footer in div wrap and set margin-top to 2px.

Gap between div.notice and div.mixer-info is still not congruent with the rest of the interface.

[Cyanoxide]

Thank you, as soon as you said you can change tr and td in css I realised how to do it but thank you very much for the help, I appreciate it very much.

On my resolution it seems to be working perfect in both browsers, any chance you can check in yours? Don’t want to hand it off with a major problem that I haven’t seen.

[jayweb]

Looks good in IE 8, Firefox, and Chrome.

In IE 7, there was some issues. But that was hours ago from this post and I was at work when viewing it. You may have been doing some updates since then. Otherwise, nice work:)

[Cyanoxide]

Thank you, I’ve handed it to my client and he’s very pleased with it.

[Author]

Posts