Forum Moderators: not2easy
Basically all I am trying to do is get a heading box with rounded corners, The width needs to be expandable, so i have a left and right image that contains the rounded edges for each side
I am not that good at CSS, but I have got this code working in all browsers except Safari.
In Safari it works perfectly apart from a white line between the 2 spans, I am testing in the latest version of Safari for Windows (3.1.1?)
Any solution that fix the Safari issue cause problems in other browsers.
Any help would be greatly appreciated, i have read dozens of tutorials however I couldn't follow them, this one i do understand and it does seem to work OK
/* Header stuff starts here */
.headmenu {
/*background-color: #3DB348; causes lines around corners */
height: 66px;
text-align: left;
}
div.row {
clear: both;
/*background-color: #3DB348;
padding-top: 2px; */
}
div.row span.left {
background-color: #3DB348;
float: left;
background-image: url(images/grape.jpg);
background-repeat: no-repeat;
text-align: left;
font-weight: bold;
color: #FFFFFF;
width: 40%;
font-size: small;
height: 76px;
}
div.row span.right {
background-color: #3DB348;
float: right;
background-image: url(images/grape-right.jpg);
background-repeat: no-repeat;
background-position: right; /*ggghhhhhh */
text-align: right;
/*font-weight: bold;
word-spacing: 1em; */
height: 76px;
color: #FFFFFF;
width: 60%; /* */
font-size: small;
}
div.row a:link{
color: #FFFFFF;
text-decoration: none;
}
div.row a:visited{
color: #CCCCCC;
text-decoration: none;
}
div.row a:hover{
color: #000000;
}
div.row a:active{
color: #FF0000;
}
/* end of header */
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-image: url(images/banana_bg.gif);
background-repeat: no-repeat;
background-position: center top;
}
div.spacer {
clear: both;
height: 1px;
overflow: hidden;
margin-top: -1px;
}
I added the doctype here as the notes say i should add it for you guys
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><div class="headmenu">
<div class="spacer">
</div>
<div class="row">
<span class="left">
</span>
<span class="right">
Some text goes here
</span>
</div>
<div class="spacer">
</div>
</div>
Stokely Safari Hack<style type="text/css">
#example {
color:red;
}/* for firefox */
/*\*/
html*#example {
[color:black;color:blue;/* for SafariÓÐЧ */
]color:green;/* for IEÓÐЧ */
}/**/
</style><div id="example">
Stokely Safari Hack : If you See Large Blue Text, you are using Safari
</div>
Safari Hack from:http://www.stormdetector.com/hacks/safarihack.html
don't float the right side and remove it's width. It will auto fit the remaining space.
I think it's happening because of rounding the 40% and 60%.. but I'm not sure.
Unfortunately removing the right float and the width of the right side caused more problems so Ileft them in and it all seems to work ok
