Can anybody offer a little CSS advice?

[AndyLucia]

Can any of you wonderful experts help me out with a little problem please? For a while now I've been changing bits of our websites from a table basis to CSS based; I've managed to get it working fine in IE6 but, needless to say, I've got problems with Firefox and now IE7.

The issue I can't solve are the pullquote boxes, an example can be found here (http://www.andaluciarentals.co.uk/Andal ... ldlife.htm) which works fine in IE6 but not in Firefox.

The CSS tags which affect this behaviour are currently this -

blockquote {
float:right;
width:260px;
margin: 0 0 20px 20px;
position:relative;
background-repeat: no-repeat;
background-color: #ffffcc;
background-image: url(file:///T|/Andalucia%20Rentals%20New%20Site%20live%20v2/assets/pullquote_top.gif);
background-position: top;
}

#contentArea > blockquote { margin-right: -60px;
}

Can anybody help me pull this recalcitrant box back into line?

Thanks

[Angel]

Hi. I'm no expert nowadays, but I find the Web Developer Extension for Firefox invaluable.

With such funnies, the first thing to do is validate your HTML and CSS (options under the Tools menu). Then correct the errors and see if it's fixed.

HTH

[marcus]

Hi

I'm not quite clear what you're trying to do since I think your
margin-right: -60px;
is presumably there specifically to push the block outside the box?

not sure I'd use -ve margins too much if i was looking for cross-browser consistency though.

[maria-g]

First Step - make sure you use a full DOCTYPE that includes the link back to the W3C. That is the best way to get all browsers to follow Standards Compliant rendering. Then tweak your code to display the the page the way you want and check it with the W3C Validator.

Also, to be proper, you should use "px" on all margin values (or any other pixel-based value) even if the value is 0. W3C validation throws a warning otherwise.

[AndyLucia]

Thanks for the input folks, much food for thought there. I'll let you know how I get on.

[Tommy]

Why not use a <div></div> to contain the text. eg

this in the CSS

#quote{
color:#006699;
float:right;
text-align:center;
padding:40px 20px 40px 20px;
margin:10px;
font-size: 165%;
width:260px;
background-repeat: no-repeat;
background-color: #ffffcc;
background-image: url(file:///T|/Andalucia%20Rentals%20New%20Site%20live%20v2/assets/pullquote_top.gif);
background-position: top;
line-height: 1.2em;
font-weight:bold;
}

and replace:

<blockquote><p class="quoteBody">Andalucia is typically described .... as the meeting point between Europe and Africa</p><p class="quoteCite"></p></blockquote>

with:

<div id="quote">Andalucia is typically described .... as the meeting point between Europe and Africa</div>

I have done this and tested it in:
IE 5.5/6/7
FireFox 1.5/2.0
Netscape 7/8
Opera 7/8
Safari (apple mac)

any problems give me a shout.

Also just a bit of advice, try not to use % for font size as this can cause more headaches cross browsing and for those with low resolutions (800x600).

put into the body in the css the following:

body{
font-size:62.5%;
}

this represents the following 1.0em = 10px so 1.2em will equal 12px. em is a better of defining font size espeacially across multi browsers and resolutions and works with the browsers zoom in functionality.

[westerweld]

What is a <div> tag exactly? A friend of mine who does a lot of web development was talking about them the other day. All I understood from him was that their now the new industry standard and they're being used in place of <table> tags. I dabble with HTML and I've always relied on the <Table> tag to set up my pages.

[Tommy]

This will give you more infomation

http://www.w3schools.com/tags/tag_div.asp

I wouldnt say this is a industry standard as they are still used to display data, it is mainly a move forward with the Web 2.0 so you can control it all from your CSS and not within your page so your page is quicker to load and saves on bandwidth (only realy noticable on heavy traffic sites). Especially as CSS3 will soon be used through out the industry.

[AndyLucia]

Well, I've temporarily sorted it with a "quick & dirty" approach. Tommy, I shall be studying your post in more detail, as I am looking to move more and more of the site over to a <div> based structure.

Thanks peeps.