Wed, 2009-07-08 06:41
I'm struggling with CSS at any time, but right now I'm having a problem with placing a random quote in the header of a new site I'm developing.
It's ok in Firefox 3.0, IE6 on Windows, but in cross browser checking it is wandering left and right. You can view the header at my site, peterwade.com/assets/ .
The css is in header.css, lines 21 to 45...
#header1 .quote-head { width: 215px; height: 20px; position: absolute; right: 10px; top: 20px; left: 800px; padding-top: 8px; text-align: left; font: bold 10px Verdana, Arial, Helvetica, sans-serif; color: #3F8EB5; } #header1 blockquote { width: 215px; height: 66px; position: absolute; top: 42px; right: 10px; left: 800px; background:url(none); margin: 0; font: 10px Verdana, Arial, Helvetica, sans-serif; color: #6DA1C8; padding: 3px 0 0 0px; }
Thanks!
Peter
Sat, 2009-07-11 17:57
#1
Two things should probably
Two things should probably help sort out this problem for you:
First, create an anchor point within your #header1
as follows:
#header1 { height:120px; position:relative; /* anchor or reference point for quote */ }
This is the main reason you get cross browser differences. It is something along the lines of IE incorrectly treating the nearest parent container as the anchor point (#header1 in your case) whereas standards require that the anchor point is that of the nearest container with a position declaration. If there is none, then the body is taken as the reference point.
By adding the position declaration to your #header1, we bring consistency to what is used as the anchor point.
Second, when positioning elements horizontally, use either left or right settings, not both as you have. A quick look at your code suggests that the right value of 10px is probably what you want in this design. You may need to play around with the right and top values to get things precisely where you want, but hopefully you get the general idea.
That should help with the specific issue.
You might also want to consider putting a
around the two things that make up your quote and then you can manage the positioning of the
rather than the and elements individually. Just a thought.
Oh, and last: you may find you still need to feed "slightly" different right or top settings to IE since IE has its own way of doing things!
Regards
Sun, 2009-07-12 06:37
#2
position in header
Thanks, css-helper. Those two points were a great help. I think that's fixed it and I can do some minor tweaking.
Cheers,
Peter
P.S. Sorry about the cricket!