Gwydionmom wrote:
> http://www.d2care.org/draft.php
>
> The first problem is with IE on Windows. If it can be fixed without
> messing up anyone else, that would be great, but I can live with it
> if it's going to scramble the browsers that are working properly.
> Anyway, on the other browsers I've tested, the top line of the
> content is even with the top of the menu, but in IE, it's dropped
> down a bit.
IE adds line-height to the clearing-br.
Adding...
br.clear {font-size: 1px; line-height: 0.1;}
...will adjust that.
> The second problem might be harder to fix. Short headings work just
> fine, but for longer ones, or if the browser window is narrow, they
> wrap. When they wrap, the background image repeats on the second
> line, the background color and border overlap the first part of the
> heading, and the border is missing on the right of the top line and
> the left of the bottom line. What I'd ideally like to see happen is
> that everything would stay in a nice even box with a border all the
> way around. I've thought about setting the heading to not wrap,
> which would probably create horizontal scrolling, but I'm not sure
> that is ideal either.
Elements set to 'inline' will behave like you describe, so those
headings should be styled as 'block'. A float is a 'block' and can be
offset by its margins, but you need to clear the element (paragraph)
below the float.
I added in the background since I couldn't find a good reason why IE
shouldn't see it.
Some conflicting styles somewhere in your stylesheets, so I also added a
'hide from IE-mac' hack - making IE/Mac fall back to your original
style. IE/Mac should otherwise be quite happy with floating headlines,
so you should find those conflicts and make it work in IE/Mac too.
.gtitle {
display: inline;
border: 1px dotted #006CC5;
z-index: 5;
}
/* Hides from IE-mac \*/
.group .gtitle {
float: left;
margin: -.5em 0 -3px 0;
padding: 7px 40px;
width: auto;
border: 1px dotted #006CC5;
background: #B6DCF5 url(bone0000.gif) no-repeat 1% 30%;
}
/* End hide from IE-mac */
.group p {clear: left; padding-top: 1px; }
Cross-checked in IE6, Opera 7.54 - 9.0, Firefox 1.5, Safari 1.2.4,
IE5.2. Pixel-identical: no, but pretty close :-)
regards
Georg
--
http://www.gunlaug.no
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
