2 replies [Last post]
posword
Offline
newbie
Last seen: 5 years 17 weeks ago
Timezone: GMT+9.5
Joined: 2009-07-08
Posts: 3
Points: 0

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

css-helper
Offline
Enthusiast
UK
Last seen: 4 years 47 weeks ago
UK
Joined: 2009-04-24
Posts: 120
Points: 4

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

=========================================================================
If you are climbing a mountain the person most useful to you is just ahead of you on the rope (since they are still learning too).
The person who has already made it to the top is usually not much help whilst you are struggling on the rock face.
=========================================================================

posword
Offline
newbie
Last seen: 5 years 17 weeks ago
Timezone: GMT+9.5
Joined: 2009-07-08
Posts: 3
Points: 0

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!