I don't understand why something so easy with HTML is so difficult in CSS. I used a div tag to create a bordered backdrop in which I am going to place an image inside with text wrapping around in the same fashion you would in HTML using an IMG tag with the alignment set to left. If I place the image within the DIV backgroudnd set the alignment to left it screws everything up. If I use the float attribute and set it to left it works fine, however, if the text portion isn't long enough the backdrop won't extend below the image. I found a way to do it by using a blank div tag underneath the code with the style set to clear:both. Why is this extra step neccassary??
Also, after viewing the page at work on PC running IE6.0 I noticed the alignment on the TOUR SPOTLIGHT box in the left table cell is off. It is basically two DIV tags stacked on top of one another with the bottom DIV tags top-margin set to -1 the the bottom border of the top div tag and the top border of the bottom DIV tag overlap making it look as though its a simple two row table with a 1 pixel border. In IE6.0 the bottom DIV tag extends further to the right than the top DIV. Also in IE6.0 in the right hand table cell (talked about in the first paragraph of this rant) the DIV which contains BOOK IT completely dissapears!
I am trying to learn and embrace CSS but the rules and compatibility seem a bit ridiculous. Any suggestions? The URL in question is: <!-- m --><a class="postlink" href="http://www.suspendedmoment.com/css/test.html">http://www.suspendedmoment.com/css/test.html</a><!-- m -->
Thanks,
RichToo many divs and classes
#finder {
border:1px solid black;
background:#f00;
color:#fff;
}
#finder h2 {
margin:0;
padding:2px;
font-size:0.7em;
font-family:Verdana,Arial,Helvetica;
font-weight:bold;
}
#finder img {
display:block;
border-top:1px solid black;
}
#tour p{
position:relative;
margin:0;
}
<div id="finder">
<h2>TOUR SPOTLIGHT</h2>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"oc.jpg" height="216" width="275" alt="">
</div>
and wrap the text and 'button' in a <p> in #tour
The clear after using float is nearly always required. It's the nature of the beast.
Also, after viewing the page at work on PC running IE6.0 I noticed the alignment on the TOUR SPOTLIGHT box in the left table cell is off. It is basically two DIV tags stacked on top of one another with the bottom DIV tags top-margin set to -1 the the bottom border of the top div tag and the top border of the bottom DIV tag overlap making it look as though its a simple two row table with a 1 pixel border. In IE6.0 the bottom DIV tag extends further to the right than the top DIV. Also in IE6.0 in the right hand table cell (talked about in the first paragraph of this rant) the DIV which contains BOOK IT completely dissapears!
I am trying to learn and embrace CSS but the rules and compatibility seem a bit ridiculous. Any suggestions? The URL in question is: <!-- m --><a class="postlink" href="http://www.suspendedmoment.com/css/test.html">http://www.suspendedmoment.com/css/test.html</a><!-- m -->
Thanks,
RichToo many divs and classes
#finder {
border:1px solid black;
background:#f00;
color:#fff;
}
#finder h2 {
margin:0;
padding:2px;
font-size:0.7em;
font-family:Verdana,Arial,Helvetica;
font-weight:bold;
}
#finder img {
display:block;
border-top:1px solid black;
}
#tour p{
position:relative;
margin:0;
}
<div id="finder">
<h2>TOUR SPOTLIGHT</h2>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"oc.jpg" height="216" width="275" alt="">
</div>
and wrap the text and 'button' in a <p> in #tour
The clear after using float is nearly always required. It's the nature of the beast.