Firefox alignment

[ilcsportdirect]

Hi,

Got a bit of a problem with our site regarding alignment of one image - it seems that the top banner does not align correctly in FireFox, as it does in IE.
In non IE browsers the top banner image seems to disappear off the page...

http://dvds.evertonfc.com/


Anyone got any pointers?

Thanks,

Dan

[Surf Boy]

Please could you supply your code for the page, so we can look at it

[davie_ne1]

as far as i can tell the image that you are having problems with is not aligned

try to align the image to the left i.e.

<div align="left"><a href="http://dvds.evertonfc.com/acatalog/New_Products.html"> <img src="acatalog/statichouse.jpg" width="728" height="90" class="topimage"></a></div>

[los_design]

in FF ensure you declare all valid statements and alignments. It does not forgive like IE6 as it does not like depreciated usages in most cases.

Wait until you set your site live into IE7....now thats fun! Buggy as hell dudes.

Good job we only have it on a preview machine

[jont]

the image class .topimage is in use to position the element but is at odds with the float:left from the logo

Probably best to take it all back to basics and recreate the top area - I would be inclined to postion:absolute the containing div with zero offset and then position:relative the logo, banner and search box to that

[ilcsportdirect]

Cheers for the feedback guys, but as my Actinic knowledge isnt up to jont's level, I am having a little trouble getting my head round it...

I presume that this is something that needs altering in the CSS but I cant find the section that refers to the banner - any ideas?

Thanks for your helpo with this - have just 'upgraded' to IE7 ands the same problem occurs!!

Thanks,

Dan

[jont]

Not tested in IE6 but see if the following sets you out on the right tracks : (this is found in the everton.css file)


#banner {
width: 750px; /*new line to existing */
padding: 0px;
margin: 0px;
height: 120px;
}

#banner input {
width: 200px
display: block;
position: absolute;
top: 115px;
right: 20px;
}

#banner_right img {
margin-left: -50px;
}

the first bit has a declared width added to the existing and the second 2 are new additions

Not sure how the layout will look in IE - especially with the negative margin and there may be a more sensible solution when taking more than a casual look.

HTH

[RobSollars]

Hi Dan.

Few of us can truly hope to ascend the treacherous mountain that is jont's Actinic knowledge (indeed I seem to spend much of my days floundering amongst the foothills like some hideous beached lungfish), but that doesn't mean that I can't have a go at helping.

I had a look at your site and reached exactly the same conclusion as jont: it's the float property applied to the elements in your header that's causing the layout to go astray.

Opening up "everton.css" reveals the style for the image's containing div to be:

#banner_right {
	float: right;
	width: 470px;
	height: 100px;
	padding: 0px 8px 0px 0px;
	text-align: right;
}

The thing that's causing the image to slide all the way to the right is this troublesome line:

float: right;

It's taking the property somewhat too literally and floating all the way over to the right of the page. Fortunately, because the logo is already floated, we can bring it back into position just by changing the value to read:

float: left;

Which results in the entire style being:

#banner_right {
	float: left;
	width: 470px;
	height: 100px;
	padding: 0px 8px 0px 0px;
	text-align: right;
}

This puts the image where it's meant to be. However, the search box is not in a very useful position, as it now occupies both the blue bar and part of the image. Unfortunately, without altering the actual code of the page, there's not much I can do to sort out a solution for it. The header is a bit of a tag soup, and the quicksearch bar's containing div doesn't have an id or class that would allow me to apply change to it on the fly.

A really nasty hack that I do not advise you to use at all (but does put the form in a sort of reasonable position) is to apply the style:

div#banner form {
	padding-top: 92px;
}

Again, this is an awful way to go about fixing it. If you can apply an id to the div that contains the form, or if you can clean up the header a little so that there aren't so many divs around, it would be much easier to get the element into the right place.

Hope that's of some help. It works in Firefox, but I can't promise anything for IE I'm afraid.

[RobSollars]

Curse you jont! I need to spend less time devising colourful fish metaphors and more time being succinct

[jont]

the quicksearch bar's containing div doesn't have an id or class that would allow me to apply change to it on the fly

Don't you just love Firefox for being able to do that

[jont]

Curse you jont! I need to spend less time devising colourful fish metaphors and more time being succinct

That's the Yorkshireman in me ... straight to the point with no frills

[RobSollars]

Don't you just love Firefox for being able to do that

I'd be even happier if I could do it in the IE tab

[ilcsportdirect]

..

now for the embarassing question - where can I open everton.css in actinic? in v7 it was just a case of opening in dreamweaver but I believe that all css changes have to be made in actinic now otherwise any alteratins will be overwritten...

Cant see it on the drop down for the 'select page type'...

Thanks for the comments above though, I'm sure I'll be ready to go once I find the css!!

Cheers,

Dan

[jont]

This will be an external file in the site folder somewhere - you can edit this with Dreamweaver or notepad etc.

[ilcsportdirect]

brilliant, thanks - I've been told previously that all css editing had to be done in actinic, so didnt bother trying that.

Thanks,

Dan