I am sooo trying to get use to how to use CSS rather than tables. I hate how most of what I work on is table based and have 100 times more html code then is necessary! I really believe that tableless design, as much as possible, is the best route to go on the design front.
With that being said I am having issues with a surrounding box concept utilizing CSS and as little amount of html markup as possible.
Here is what the box looks like which it utilizing tables in html. I have used web developer add on to highlight the different table cells. First cell is image, second cell is background image so that text can show up, third cell on the top right is simply an image.
Then the second row is first cell is background image repeating on y axis, then content cell and then third cell is another background image repeating on y axis so that content cell can be as large as needed. Then bottom row of cells is basically just like the top row of cells. Makes perfect sense in my table driven brain.
When I go to attack this utilizing a tableless design I get mixed results, cannot get the right y axis background image to work, can’t get the top right image to display the same in firefox and internet explorer, etc. Here is a snippet of coding to see if I am doing this correctly.
<div id="sidebarbox">
<div id="sidebarboxTop">
<img class="floatLeft" src="images/box_corner_left.gif" width="40" height="38" />HEADER
</div>
<div id="sidebarboxLeft">
<div id="sidebarboxContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer volutpat fringilla magna, et aliquam nulla viverra ac. Morbi lobortis convallis ipsum, in vehicula neque sagittis in. Mauris cursus lobortis nibh et tincidunt. Phasellus ut lacus fermentum mauris elementum ornare sit amet id justo. Sed enim lectus, tincidunt at tempus eget, condimentum sed neque.</p>
</div>
<div id="sidebarboxRight">
</div>
</div>
<div id="sidebarboxBottom">
<img class="floatLeft" src="images/box_corner_footer_left.gif" width="41" height="29" />
</div>
</div>
Here is the CSS:
#sidebarbox {
width: 196px;
margin-right: auto;
margin-left: auto;
}
#sidebarboxTop {
background-image: url(images/box_corner_center.gif);
background-repeat: repeat-x;
margin-right: auto;
margin-left: auto;
width: 196px;
height: 38px;
}
#sidebarboxLeft {
background-image: url(images/box_box_bg_l.gif);
background-repeat: repeat-y;
float: left;
width: 183px;
}
#sidebarboxContent {
background-color: #FFFFFF;
margin-left: 18px;
}
#sidebarboxRight {
background-image: url(images/box_box_bg_r.gif);
background-repeat: repeat-y;
}
#sidebarboxBottom {
background-image: url(images/box_corner_footer_middle.gif);
background-repeat: repeat-x;
width: 196px;
margin-right: auto;
margin-left: auto;
height: 29px;
}
.floatLeft {
float: left;
}
.floatRight {
float: right;
}
Here is the outcome of what i’ve done. You can probably see why I am frustrated.
I realize that this isnt complete, but i’ve got fed up with the outcome being different on FF and IE. I also believe i’m using too much html markup coding to accomplish this. I’m just so stuck on table cells and not sure on how to implement this because when i think of how to do this without tables, i end up thinking “for every cell there needs to be a div to completely control the look/feel”
Help please!