Cross Browser Help

chris_r · 23 Sep 2010 at 13:21

Hello,

So, not been seen by many yet but working on my site. Ignore any grammar as it is just all for testing purposes at the moment.

Anyway head over to; www.chrisr.co.uk

If you use Chrome or Firefox, you will see a nice looking site.

I have two issues (so far!) with IE. Please can you help.

1:

In FF or Chrome the 'Social Networks' box shows evenly. If you look at it in IE it shows in 3 rows.

How can i get it to how it looks in FF/Chrome and show with 2 rows of six?

The code:

Code:

<p><a href="http://www.youtube.com/chrisreillymyspace">
  <img src="http://img132.imageshack.us/img132/8537/youtubee.png" border="0">
  </a> 
  
  <a href="http://twitter.com/chrisreillywww">
  <img src="http://img268.imageshack.us/img268/4733/twitterkm.png" border="0">
  </a> 
  
  <a href="http://www.myspace.com/chrisadamreillyemotional">
  <img src="http://img268.imageshack.us/img268/9315/myspaceyq.png" border="0">
  </a> 
  
  <a href="http://www.facebook.com/profile.php?id=514212075&ref=profile">
  <img src="http://img27.imageshack.us/img27/1026/facebookb.png" border="0">
  </a> 
  
  <a href="http://chrisr.co.uk/?feed=rss2">
  <img src="http://img190.imageshack.us/img190/5466/feedb.png" border="0">
  </a> 
  
  </br>
  <a href="http://www.waynesworld.com/users/chrisreilly/">
  <img src="http://img838.imageshack.us/img838/1857/83506398.png" border="0"></a>
  
  <a href="http://uk.linkedin.com/pub/christopher-reilly/23/8bb/948"><img src="http://img707.imageshack.us/img707/9578/linkedin.jpg" border="0"></a><a href="http://www.reverbnation.com/#/chrisreilly">
  <img src="http://img810.imageshack.us/img810/7184/reverbnation.png" border="0">
  </a> 
  
  <a href="http://wehavetomorrow.co.uk/profile.php?user=ChrisReilly">
  <img src="http://img408.imageshack.us/img408/7351/63787702.png" border="0">
  </a><a href="http://www.facebook.com/profile.php?http://www.bebo.com/ChristopherR434"><img src="http://img641.imageshack.us/img641/3248/bebo48x48.png" border="0"></a><a href="http://www.facebook.com/group.php?gid=62870072663&ref=search"><img src="http://img801.imageshack.us/img801/9871/32112030.png" border="0"></a>
  <img src="http://img835.imageshack.us/img835/4705/comingsoon.gif" border="0">
  </p>

2:

Look at the top menu which has 'about' etc on it. In chrome/FF it has rounded edges, how can i get it to show as rounded in IE rather than square?

Mart2912 · 23 Sep 2010 at 13:33

I would just add conditional statements to IE if all else fails http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx.

As for the rounded edges, IE8 and earlier do not support CSS3, so you won't get rounded edges using conventional methods, but this might help: http://jonraasch.com/blog/css-rounded-corners-in-all-browsers

But this won't be an issue with IE 9 (You will need to get someone with IE 9 beta installed just to make sure

)

chris_r · 23 Sep 2010 at 14:47

Thanks - installing IE 9 myself now and seeing what happens.

Any other idea about the 'rows' thing? Thanks

Mart2912 · 23 Sep 2010 at 15:40

Try removing the </br> after the 5th <a> tag.

chris_r · 23 Sep 2010 at 15:54

Blimy!

I don't even remember adding that, thanks! so simple haha!

Thanks though, that's sorted. Now for the rounded edge IE fix.

Tried to download IE 9 but didnt work

Mart2912 · 23 Sep 2010 at 16:06

No problem.

For IE 9 you need windows vista or windows 7. So I can't help you there I'm afraid as I'm still on XP lol

. I'm guessing you are also on XP? Or are you having other problems with it?

chris_r · 23 Sep 2010 at 16:10

On Vista, it just wont work for some reason. Set up quits automatically.

I'm just going to leave it, looks fine

FabienO · 23 Sep 2010 at 16:18

I find using 960grid helps with cross browser issues. Or at least the reset.css does.