15 replies [Last post]
sticky
Offline
Regular
Last seen: 11 years 8 weeks ago
Joined: 2005-10-04
Posts: 13
Points: 0

OK, if you view my site in either of these browsers you will see the problem.

ionmac.com/idea

The right column seems to load at the bottom of the center column.

The 3 coloumns are all fixed widths, so I am unsure why this is happening.

The site loads fine on Safari and Firefox on Mac.

The rest of the pages of the site are coded differently so please ignore them and only look at the front page. Thanks for any help or repsonse.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Windows Firefox and IE CSS problem

Actually, it doesn't work on Firefox/Mac, or Safari for that matter. I'm looking into it now...

On second thought, I won't look into it. You have 225 validation errors, you're using ancient tags, and multiple nested tables for layout.

drhowarddrfine
Offline
Leader
Last seen: 11 years 8 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

Windows Firefox and IE CSS problem

And you only have 226 html errors on the validator.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

sticky
Offline
Regular
Last seen: 11 years 8 weeks ago
Joined: 2005-10-04
Posts: 13
Points: 0

Windows Firefox and IE CSS problem

wolfcry911 wrote:
Actually, it doesn't work on Firefox/Mac, or Safari for that matter. I'm looking into it now...

On second thought, I won't look into it. You have 225 validation errors, you're using ancient tags, and multiple nested tables for layout.

Hmm OK.

Fair enough, could you not at least point me in the right direction. I am lost. Ancient tags? Never knew there were such things. Multiple nested divs? That not good either?

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Windows Firefox and IE CSS problem

I'm not trying to be rude, but the use of tables for layout is somewhat taboo around here. Especially nested tables. This is a CSS forum, where standards are embraced. Use CSS for layout and styling.

Is this a new page? If so, there's really no need to use a transitional docytype. It's very good that you at least have one complete with URL as it puts browsers into 'standards' mode. Try to use a strict doctype for new work. The tags I spoke of are the <font> and <center> tags which have been deprecated for some time now. Also the use of <b> tags is discouraged (generally), replaced by CSS.

Please don't get discouraged, but learn some more CSS layout. You're page is quite attractive and lends itself well to an all CSS layout. In fact, if (when) you successfully convert it, I'd be willing to bet it would be showcased on some CSS design sites.

sticky
Offline
Regular
Last seen: 11 years 8 weeks ago
Joined: 2005-10-04
Posts: 13
Points: 0

Windows Firefox and IE CSS problem

And there was me thinking there was a simple fix.

As for tables, I haven't used any tables, all the layout of the boxes are done from the code on the Stylesheet.

But anyway, thanks for your comments, feedback, and advice, I stilll have a lot to learn, and am sort of looking forward to getting it how it should be, and working well.

Slight problem is I am not sure where to go from here Sad

larmyia
Offline
Elder
London
Last seen: 12 years 19 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

Windows Firefox and IE CSS problem

sticky wrote:
As for tables, I haven't used any tables, all the layout of the boxes are done from the code on the Stylesheet.

bit confused as to what you mean here. go onto your site and view source. the whole thing is in tables. what tools are you using to write your code?

larmyia

sticky
Offline
Regular
Last seen: 11 years 8 weeks ago
Joined: 2005-10-04
Posts: 13
Points: 0

Windows Firefox and IE CSS problem

I'm confused too, it says tables all over it :S

I am using dreamweaver. All the layout is in my stylesheet. All the boxes relate to the stylesheeet, and thats how they are laid out.

I have nested div tags, if that means anything.

Day
Day's picture
Offline
Enthusiast
Texas
Last seen: 15 years 16 weeks ago
Texas
Timezone: GMT-6
Joined: 2005-10-07
Posts: 103
Points: 0

Windows Firefox and IE CSS problem

Dreamweaver will do that. Add tables, I mean. As a newbie who just did all this, I highly recommend going and reading all the sticky posts about what to do before posting, etc. Specifically, I'm refering to this post: http://www.csscreator.com/css-forum/ftopic2471.html

The relevant portion is this:

Quote:

3. Hand Code

Please do not get embroiled in Dreamweaver or Frontpage. WYSIWYG editors do not write code, you do. DW has the habit of turning out dodgy code and of luring the user into a false sense of security.

You have the opportunity to learn the not-so-difficult art of hand coding, which will reap many benefits down the road. You will find your understanding of the structure of code and general advancement to be far quicker.

Use DW as an editor if you must, but steer clear of it's many oh-so-helpful facilities, such as preview modes and WYSIWYG modes - they lead to grief.

Only ever check your work in that which will be ultimately rendering said work, i/e a browser, preferably FF initially to confirm correct coding and then IE to see what adjustments need to be made.

->Day<-

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Windows Firefox and IE CSS problem

Hey

I agree, DW does all sorts of things you don't want for css coding.

I use webcoder from tsw (v5 is still free, but the soon to be released v2005 will be shareware). It can preview in IE and Mozilla (Firefox - if the Active X add in is there).

It does oodles more and is far better than DW.

Check it out.

Trevor

Anonymous
Anonymous's picture
Guru

Windows Firefox and IE CSS problem

Here is a list of the markup errors to get you started:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.ionmac.com%2Fidea%2F

Get working on that. Smile You really only need one <html> tag.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 45 weeks 10 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Windows Firefox and IE CSS problem

See, this is the reason you don't use Dreamweaver.

Here, I fixed it up a bit for you:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<title>iOnMac - News, Reviews, Previews, Articles, Message Boards, Downloads, Tutorials, and More!</title>
<META name="description" content="Welcome to iOnMac. Your source for Apple News, Reviews, Previews, Articles, User Opinions, Community Boards, and more!">
<META name="keywords" content="apple, apples, mac, macs, apple reviews, reviews, previews, apple review, mac reviews, mac review, ipod, imac, ibook, powerbook, powermac, g4, g5, shuffle, ipod shuffle, mac mini, mini, wallpapers, ipod accessories, accessories, technology">
<META name="robots" content="index,follow">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<meta name="ROBOTS" content="INDEX,FOLLOW" />
<link rel="alternate" type="application/rss+xml" title="iOnMac News Feed" href="cutenews/rss.php">
<link href="stylesheet.css" rel="stylesheet" type="text/css"> 
<style type="text/css"> 
body { 
margin: 0; 
padding: 0; 
background-color:#FFF; 
}
</style>
</head>

<body>

<div id="header"><center><img src="ionmac_logo.jpg" alt="iOnMac">
<a href="http://www.belightsoft.com/products/swiftpublisher/overview.php" target="_blank"><img src="http://ionmac.com/ads/belightsoftware.gif" alt="Ad"></a></center></div>

<div id="menu">
<center><b>
   <a href="index.php" title="Home">Home</a>   -
   <a href="reviews.php" title="Reviews">Reviews</a> - 
   <a href="articles.php" title="Articles">Articles</a> - 
   <a href="recommended_reading.php" title="Recommended Reading">Reading</a> - 
   <a href="downloads.php" title="Downloads">Downloads</a>  -
   <a href="faq.php" title="Apple FAQ">FAQ</a> - 
   <a href="http://forums.ionmac.com/index.php?act=module&module=gallery" title="Gallery">Gallery</a> - 
   <a href="http://forums.ionmac.com" title="Forum">Forum</a>  -
   <a href="http://www.cafepress.com/ionmac" title="iOnMac Shop">Shop</a>  -
   <a href="editorials.php" title="Editorials">Editorials</a>  -
   <a href="about_us.php" title="About iOnMac">About Us</a>  -
   <a href="contact_us.php" title="Contact Us">Contact Us</a>
</b>
</center>
</div>


<div id="frame"> 
<div id="contentleft">
<center>
<script type="text/javascript">
google_ad_client = "pub-9234023922789288";
google_ad_width = 120;
google_ad_height = 600;
google_ad_format = "120x600_as";
google_ad_channel ="";
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script><p>
<a href="http://click.linksynergy.com/fs-bin/stat?id=2YQHUwCXiJU&offerid=7097.3976&type=3&subid=0"><IMG border=0 src="images/linksharesmall.gif"></a><p>
<a href="http://click.linksynergy.com/fs-bin/click?id=2YQHUwCXiJU&offerid=78941.10000298&type=4&subid=0"><IMG  width="88" height="31" alt="iTunes Ad" border="0" src="http://images.apple.com/itunesaffiliates/88x31/88x31-1.jpg"></a><IMG border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=2YQHUwCXiJU&bids=78941.10000298&type=4&subid=0"><p>
<a href="http://click.linksynergy.com/fs-bin/click?id=2YQHUwCXiJU&offerid=80901.10000020&type=4&subid=0"><IMG alt="Banner " border="0" src="http://www.mac.com/1/partners/125x60_D_affiliates.gif"></a><IMG border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=2YQHUwCXiJU&bids=80901.10000020&type=4&subid=0"><p>
</center>
</div>
<div id="contentcenter"><div id="centerlatest"><a href="index.php" id="3"><img src="images/template.gif" width="200" height="80" alt="Back Pack" border="0" id="3" /></a></div>

<div id="centertext"><b>Latest Reviews:</b><br>
- <a href="index.php">Articles</a><br>
- <a href="index.php">Articles</a><br>
- <a href="index.php">Articles</a><br>
- <a href="index.php">Articles</a>
<p><b>Latest Reviews:</b><br>
- <a href="index.php">Articles</a><br>

- <a href="index.php">Articles</a><br>
- <a href="index.php">Articles</a><br>
- <a href="index.php">Articles</a>
</div>
<div id="centerlatest2"><a href="index.php" id="2"><img src="images/marware.jpg" width="200" height="80" alt="Marware Case" border="0" id="2" /></a></div>
<div id="centerheader">Todays News...</div>
<div id="centermain"><table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" style="text-align:justify">
<table border="0" style="border: 1px dotted #999999" width="100%" body bgcolor="#FBFBFB" cellspacing="0" cellpadding="8">

...


</body> 
</html>

you get the picture.

Verschwindende wrote:
  • CSS doesn't make pies

sticky
Offline
Regular
Last seen: 11 years 8 weeks ago
Joined: 2005-10-04
Posts: 13
Points: 0

Windows Firefox and IE CSS problem

Ok, I was looking at the code from view source, and then worked outt he tables are there becuase of Cutenews, a new program used to post news, so thats why tables are shown in the code. I knew I hadn't added any Wink

As for the rest of your posts, links and comments, I am going to start working through them.

As for the right column appearing on the bottom of the center one, any ideas?

Thanks for all your comments.

drhowarddrfine
Offline
Leader
Last seen: 11 years 8 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

Windows Firefox and IE CSS problem

It has something to do with the 225 other validation errors besides the html one mentioned above. I could be wrong though.

Why we won't help you

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

larmyia
Offline
Elder
London
Last seen: 12 years 19 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

Windows Firefox and IE CSS problem

sticky wrote:
Ok, I was looking at the code from view source, and then worked outt he tables are there becuase of Cutenews, a new program used to post news, so thats why tables are shown in the code. I knew I hadn't added any Wink

if it's on your page you added it regardless of how Wink

just checked it out again, and over 95% of your code is in tables...

furthermore there are depreciated tags in there.

if you want to solve your problems you need to validate as that could be the source of them

larmyia

ps...great link drhoward!

sticky
Offline
Regular
Last seen: 11 years 8 weeks ago
Joined: 2005-10-04
Posts: 13
Points: 0

Windows Firefox and IE CSS problem

Well there is 95% of tables there becuase of all the news cutenews loaded into the site.

Not sure how I can get around that....

Down to 218 errors Wink