Cry for help on a couple of cross browser problems.

[HestonJames]

Hello Guys,

This is a cry for help as I'm at my wits end on this. I'm pretty new to all this stuff but have hacked my way through this template and I'm finally feeling pretty happy with it.

I have a couple of issues from a cross-browser point of view at the moment, namely the following.

1. Main navigation not working properly in IE, you'll note that in FF and Chrome you get a nice little tab-arrow under the buttons for active and mouse over, these do not appear in IE though.. any ideas?

2. Main 'I'm interested' button not working in FF and Chrome, for some reason the <div> doesn't expand and wrap around the <span> which is inside it. This works exactly as I would want in IE though.

3. Weird spacing issues on my <div class="clearer" /> in IE.. notice that when its used in the main body of the page the gap it creates between the divs is larger than in the other browsers? just feels a little sloppy.

I would appreciate some advice from you guys on solving any of these problems. I've spent all morning playing around with 'padding this' and 'margin that' and not been able to solve my problems.

Cheers again guys, really appreciate the help you've been offering recently.

http://www.thinkbluemedia.co.uk/beta/index.html

Heston

 

[johnwm]

2. The button <span> is inside the Buttonbar div, and has 10px top padding, which (correctly) sets the background image down 10px.

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

 

[HestonJames]

johnwm,

Thanks for the reply. I kind of see what you mean with the padding. however removing that top padding on the span doesn't really solve the problem entirely.

Can you suggest how I should have padding/margins setup on both the containing div and the span to get it to play nice?

Thanks,

Heston

 

[datamasher]

Hi Heston,

don't know if your still having problems ? but, looking at your source code I found this :

				<div class="clearer" />
                               
		[COLOR=red]remove backslash above *[/color]						
				<h1>do it, in your underpants.</h1>
				
				<p>The second success of our product is due to the fact that all your campaigns and systems can be controlled from your very own <em>online</em> Think Blue account.</p>

				<p>Your account is accessible to you from <em>any location</em> in the world, whether you're having a busy afternoon in the office, on a flight to Tokyo or sitting at home, in your <em>underpants</em>. You can update your old campaigns, create new ones, or view reports on their performance knowing that within a few brief* moments the content will be delivered right into the pockets** of your consumers.</p>
				
				<p class="note">* no pun intended. ** provided they are wearing more than just thier underpants.</p>

                              [COLOR=red]ADD </div>[/color]

Look at the red remarks I've added ! The opening of this <div class="clearer"> shouldn't have a backslash in it, also the <div> tag has not been closed.

IE will guess at certain things and suspect that you meant to open and close the div, but other browsers may well get confused.

Hope this is of some help

Steve (datamasher)

 

[HestonJames]

Steve,

Thanks for the pointer on this, I hadn't expected a reply to this thread after all this time, what a pleasant surprise

I think you're right about these clearer div's being structured wrongly, they are no doubt causing me problems.

I'll tweak around with these adding your suggestions and see what it does for me :-D

That said, I've got a new template uploaded now which has a bunch of fixes in:

http://www.thinkbluemedia.co.uk/beta/get-me-started.html

However, I'm still not able to get the navigation menu working in IE, I've posted this issue on a few different CSS forums over the past couple of weeks and never receive any replies, it's driving me mad!

Thanks again,

Heston

 

[datamasher]

Hi Heston,
just tried your css on the w3c css validator.
It found the following 8 errors.

291  	 div.button  	 Value Error : display  -moz-inline-stack is not a display value :  -moz-inline-stack

292 	div.button 	Value Error : display inline-block is not a display value : inline-block

293 	div.button 	Property zoom doesn't exist : 1

294 	div.button 	Parse Error *display:inline;

295 	margin 	Parse Error margin:0px auto;

296 	padding 	Parse Error padding:0 19px 0 0;

297 	background 	Parse Error background:url('../images/button_right.png') top right no-repeat;

298 	background 	Parse error - Unrecognized }

These may have something to do with your problems.

Steve (datamasher)

 

[Vragabond]

Since your links are inline elements, IE ignores all their margin/padding properties. Other browsers respect the padding. I suggest you switch them to block level elements and work from there.

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

 

[HestonJames]

Evening Guys,

Thank you for your suggestions. I'll play around with these tommorow and let you know how I go.

Heston