6 Replies - 1187 Views - Last Post: 31 August 2010 - 05:44 AM

#1 Glorfindal  Icon User is offline

  • Java Enthusiast
  • member icon

Reputation: 30
  • View blog
  • Posts: 560
  • Joined: 31-December 08

Issues with CSS and different browsers

Posted 30 August 2010 - 01:36 PM

Okay I am working on a navigation bar for my website and having several troubles with different browsers and spacing aswell positioning. Here is my code:
<table height="60%" border="0"><tr><td valign="top" width="9%"><!--[if IE]>
<style type="text/css">
div.style {
margin-left: 2px;
margin-top: 4px
</style>
<![endif]-->
<![if !IE]>
<style type="text/css">
div.style {
margin-left: -8px;
margin-top: 2px
}
a.style {
margin-left: -8px;
margin-top: 2px
}
</style>
<![endif]>
<div class="style counter" align="left" title="Since 6/6/2010">
301 Hits</div>
<p></p><p>
<a href="http://www.dragonkwest.net/index.php" class="HomeLink style"></a>
<a href="http://www.dragonkwest.net/forum/" class="ForumLink style"></a>
<a href="http://www.dragonkwest.net/pictures.php?ID=1" class="PictureLink style"></a>
<a href="http://www.dragonkwest.net/wiki/" class="WikiLink style"></a>

<a href="http://www.dragonkwest.net/aboutme.php" class="aboutmelink style"></a></p><p>
<a href="http://www.dragonkwest.net/rss.xml" style="margin-top: 40px;"><img border="0" src="http://www.w3schools.com/rss/rss.gif"></img></a>
</p>
</td>...

That's not all the code but I think it is the one causing it. Here is a screenshot.
Mozilla Firefox (how it should look)
Attached Image

Internet Explorer (Incorrect)
Attached Image

Is This A Good Question/Topic? 0
  • +

Replies To: Issues with CSS and different browsers

#2 drhowarddrfine  Icon User is offline

  • D.I.C Regular

Reputation: 39
  • View blog
  • Posts: 275
  • Joined: 28-July 10

Re: Issues with CSS and different browsers

Posted 30 August 2010 - 03:41 PM

When looking at IE and other browsers, always remember that it will be IE that is in the wrong.

Now, onto the code. Without a link or the complete markup, it's going to be just guesswork for the solution. Hint #1: Never use tables for layout. They're difficult to debug and inflexible at best.

This post has been edited by drhowarddrfine: 30 August 2010 - 03:45 PM

Was This Post Helpful? 0
  • +
  • -

#3 PhunkRabbit  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 406
  • Joined: 23-August 10

Re: Issues with CSS and different browsers

Posted 31 August 2010 - 12:33 AM

Ensure you are using a CSS reset, it makes cross browser problems alot easier to fix for the start.

* { margin:0; padding:0; }



This is a bad example but will show you what I mean if you paste it into your CSS. Here is a good example of a nice CSS reset: http://meyerweb.com/...reset-reloaded/
Was This Post Helpful? 0
  • +
  • -

#4 drhowarddrfine  Icon User is offline

  • D.I.C Regular

Reputation: 39
  • View blog
  • Posts: 275
  • Joined: 28-July 10

Re: Issues with CSS and different browsers

Posted 31 August 2010 - 03:41 AM

And there are those who disagree with CSS resets. My opinion is to set all elements to what you want on your own rather than a blanket zero'ing of everything. Chances are you'll do that anyway and the reset serves no purpose but to take up space.
Was This Post Helpful? 0
  • +
  • -

#5 PhunkRabbit  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 406
  • Joined: 23-August 10

Re: Issues with CSS and different browsers

Posted 31 August 2010 - 03:49 AM

View Postdrhowarddrfine, on 31 August 2010 - 09:41 AM, said:

And there are those who disagree with CSS resets. My opinion is to set all elements to what you want on your own rather than a blanket zero'ing of everything. Chances are you'll do that anyway and the reset serves no purpose but to take up space.


I think it is safe to say we both have a very different outlook on CSS both in style and use.

If you are concerned with the ammount of code you are putting in your CSS file thats just a further argument to using float over position (since your having to set more rules into a positioned element than a float thus creating a bigger file, most of the time), im not going to get into it all again in someone elses thread but may make one to see the general opinion of people on the board.
Was This Post Helpful? 0
  • +
  • -

#6 drhowarddrfine  Icon User is offline

  • D.I.C Regular

Reputation: 39
  • View blog
  • Posts: 275
  • Joined: 28-July 10

Re: Issues with CSS and different browsers

Posted 31 August 2010 - 05:40 AM

View PostPhunkRabbit, on 31 August 2010 - 03:49 AM, said:

im not going to get into it all again in someone elses thread but may make one to see the general opinion of people on the board.

Been there. Done that.
Was This Post Helpful? 0
  • +
  • -

#7 PhunkRabbit  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 406
  • Joined: 23-August 10

Re: Issues with CSS and different browsers

Posted 31 August 2010 - 05:44 AM

Quote

Published April 17, 2008


I dont know about you but I have progressed since then, opinions change.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1