Vertical background alignment in Mozilla Firefox

[Zhris]

Hello,

I'm working on a template and I am having problems aligning an image background within a div vertically so that the background is completely centered. This problem does not occur in IE. I am using the CSS style:

#right-title{
	position: relative;
	padding: 0;
	float: right;
	width: 800px;
	height: 100px;
	text-align: left;
	[blue]background: #264176 url('../Images/Right-Title.jpg') no-repeat center center;[/blue]
}

The template can be viewed at:

http://test.massweb.co.uk/Ellis/

Any suggestions as to why this is happening will be much appreciated.

Thanks alot,

Chris

 

[Vragabond]

Wow, this has to be the most convoluted website I've seen in years. For such a simple design you're using so many lines of code it is ridiculous. However, in all this, I was not able to see what you're talking about. FF 3.6, Opera, Safari, Chrome, IE8, IE7 and IE6 (latter two through an emulator) render the graphic the same (IE6 fails at some other elements), and it doesn't look right on any of them. However, it does look like it should based on the code you've constructed.

I would really start anew. Learn more about HTML and CSS and create simple pages using simple techniques.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[johnwm]

Before worrying about browser variations make sure your page validates. See

http://validator.w3.org/check?uri=http://test.massweb.co.uk/Ellis/

At present your doctype is incorrectly terminated (it has a superfluous '/'). This may well cause browsers to render in quirks mode, with less predictable results.

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

 

[Zhris]

Hello,

Thank you very much for your input. I was able to fix my initial problem by changing to dimensions of the graphic to fit perfectly inside the div.

I first learnt to use CSS a few years ago, however I haven't used it that much. I built the template a while ago based on my knowledge and decided to use it for this project.

I am unaware that my methods are convoluted. If I were to remake the template after re-freshing my CSS knowledge I am sure I would end up using the same methods and there being very little overall difference.

However, I have cleaned up the XHTML and the CSS, removing/editing parts I saw neccessary and it validates fine. From looking over both, I feel that it is clean, tidy and is fine for what it does. Could you possibly help me out and explain what the key factors are where I am producing poor XHTML/CSS, and what I need to do to improve on these.

Thanks again,

Chris

 

[johnwm]

Because you are using javascript to achieve some of your effects (rounded corners etc) you are getting an odd 'jump' effect from the slow loading and slow DOM iteration. YSLOW shows you have nearly 3000 DOM elements which is a pointer to poor layout practices. Looks like each of your 'rounded corners' is made from dozens of individual divs with no content a just a background colour set. A quick google for 'rounded corners' (or a search on this forum) will show you lots of better ways than this.

Your left hand navigation items (Home, About, Products etc) look quite odd with rounded top corners and square bottom corners.

You are still using "<" in text, which is giving you an invalid page, Use "<" instead.

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

 

[ChrisHunt]

You are still using "<" in text, which is giving you an invalid page, Use "<" instead.

He means use &lt; instead

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd