I have been called on to fix a website which I have done well enough
code-wise but now I'm out of my comfort zone with css - so here I am!
Everything seems ok in IE8 (Windows XP) and Chrome and Safari but in
Firefox 6 there is an element which appears a couple of pixels too low
on the screen.
Can you help me tweak this or point me at some documentation please?
I have seen references to vertical-align but the element (which is the
word 'Search' with a box around it) needs to align with a white
rectangle embedded in a jpeg image. I'm not at all sure about what is
actually happening.
In case it matters, when I view source of the page with the problem I
see two blank lines at the top then ...
- - - - - - - - html excerpt - - - - - - - - - - - - - - - -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml"; lang="en"><head>
- - - - - - - - /html excerpt - - - - - - - - - - - - - - - -
... which is produced via a template in a CMS package.
Here is an excerpt from the the existing css (which I didn't write) ...
- - - - - - - - css excerpt - - - - - - - - - - - - - - - - - -
#header #toolbar-top { float: right; padding: 0; margin:5px 25px 0px
0px; display:inline; }
#header #toolbar-top .label { display: none; margin:0px; padding:0px; }
#header #toolbar-top input.searchinput { float: left; padding-right:
25px; border:0; width: 105px; height:20px; background-color:transparent;
color:#666666; }
#header #toolbar-top input.searchimage { background-color:transparent;
float: left; width: 27px; height: 20px; }
#header h1 a span { display: none; }
/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#header #toolbar-top {
float: right;
padding: 0;
/* margin:-5px 25px 0px 0px; */
margin:3px 25px 0px 0px;
display:inline;
}
}
- - - - - - - - /css excerpt - - - - - - - - - - - - - - - - - -
I tweaked the Safari top margin by 8 pixels from -5 to 3 to get the
element to display at the correct height in Chrome and Safari.
Thank you very much for any pointers ...
Mike
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
