Help ! my site breaks with Safari

[funlounge]

Hi

One of my sites http://www.acemmedia.com
works fine on IE and Firefox but some Mac users informed me
it looks completely scrambled in Safari - mainly the third column is displayed
over the middle column in most pages.

The site uses XHTML / CSS.
Unfortunately I don't have a Mac so cannot debug it

Please can somebody help ?
If you can take a look at the code and tell me what's wrong
thanks

[rms7design]

it is scrambled... okay .. as you did not post the code, here is an avenue...

what is your float settings for the last column? should be 'left'

also not only it is not well positioned, it seems that your box don't show up. also your footer does not show... and the contact box and info.

perhaps you should post your code... (not the source of the html page)

[philscanlan]

I would get it to validate at http://validator.w3.org for starters...

who knows maybe it'll fix the problem.

http://validator.w3.org/check?uri=ht...emmedia.com%2F

[davidredwine]

For $129 you could buy a copy of Mac OS X and install it using PearPC PowerPC Architecture Emulator.

http://www.windowsdevcenter.com/pub/...18/PearPC.html

Their website says it is the Panther version that works, but since the emulator mimics PowerPC G3, G4, or G5 chip, the Tiger version probably works just as well, provided you install the PowerPC version (not the intel version).

You can get the Mac OS X single user version here. http://www.apple.com/macosx/

Mac OS X Tiger comes with Safari. You could then test and debug your web page yourself

[martindow]

It will probably be a good idea to have a look here
http://www.css-discuss.org/
and post on their forum.

Good luck.

[rickbkis]

Think the only way to really address this is to have target browsers (and the machines to run them on) available for devlelopment/testing. Safari has some real issues.

I always kept an old Mac around (G3 Powerbook) just for this purpose. Didn't use it for much else. (I also have an old intel machine running FreeBSD so I can run unix FF & NS.)


The Mac blew up a couple of months ago (the PPC Powerbooks were prone to that), & I didn't want to replace it until the intel Macs came out. Just operating on faith that the previous efforts wouldn't be broken by new efforts.

The emulator looks like an interesting approach, but it looks like some folks are having a lot of difficulty/spending a lot of time to get it set up. I don't have time to burn, so I'd vote for the hardware.

There are many options.

Get a New Intel Mac
The new Intel Macs are out and they look great. Also, with Parallels, you can run Windows simultaneously as a guest OS inside OS X. This is not an emulator, but a real virtual machine (if that isn't an oxymoron) running on the hardware.

(This is my plan. I'll use a MacBook 13" for backup/short leash travel option - running OS X, WXP, and an occasional FreeBSD or Linux VM.)


A cheaper version would be to get a Mac Mini - they're only around $600 - you just need a monitor and keyboard. Probably have to get a Mac keyboard, but you should be able to hook up just about any RGB monitor to it, maybe with an adapter or an Omnicube setup.


Get a New PPC Mac
They're drop-kicking these out the door at very low prices. I've seen 12" PPC Powerbooks going for less than $1000.

Get a Used Mac
E-Bay is your friend, here. With everyone upgrading to the Intel Macs, a lot of dumped hardware is showing up for not a lot of bucks.


rickb

[funlounge]

Originally Posted by rms7design

it is scrambled... okay .. as you did not post the code, here is an avenue...

what is your float settings for the last column? should be 'left'

also not only it is not well positioned, it seems that your box don't show up. also your footer does not show... and the contact box and info.

perhaps you should post your code... (not the source of the html page)

Hi - thanks for offering the help

Here is the code for the right column



<div id="right-column">

<div class="right-column-box-standard">
<div class="right-column-title-grey">News and Events</div>


Read our latest news and events:</p>



<font color=red> Special Offers </font>Free hosting, Free SEO, and much more</p>


Contact us to learn about our Special Offers</p>
</div>
<div class="right-column-box-standard">
<div class="right-column-title-grey">Links</div>


Visit our recommended sites</p>


Additional links:</p>


Dreamhost</p>


Google AdWords</p>


Funny Jokes</p>


Free Nokia themes</p>


Links Directory</p>
</div>


<div class="right-column-box-standard">
<div class="right-column-title-grey">It's time to go to market</div>


Enjoy our special discounts and special prices throughout 2006.<br soft> Contact us today for a Free study !</p>
</div>


<div class="right-column-box-standard">
<div class="right-column-title-grey">Any questions?</div>


Don't hesitate to contact us for any question or comment:</p>


info@acemmedia.com</p>
</div>
</div>


<div id="footer">
Copyright &copy;2006 Ace Multimedia | All rights reserved

| links |
</div>
</div>


Here is the extract of the CSS for the right column
/************************/
/*** RIGHT COLUMN ***/
/************************/
#right-column {
float: right;
width: 15.0em;
margin: 0em 0em 0em 0em;
padding: 0em;
}

/* Start Mac IE5 filter \*/
#right-column {
padding-bottom: 30000px;
margin-bottom: -30000px;
}
/* End Mac IE5 filter */

/*** Standard option ***/
.right-column-title-standard {
/* clear: both; */
display: block;
margin: 0em 0em 0.5em 0em;
padding: 0.2em 0em 0.2em 0em;
background-color: rgb(255,255,255);
color: rgb(100,100,100);
font-weight: bold;
font-size: 1.1em;
}

.right-column-box-standard {
/* float: right; */
width: 13.0em;
margin: 0em 1.0em 0.8em 0em;
padding: 0.4em 0.4em 0.4em 0.4em;
border: solid 0.1em rgb(200,200,200);
background-color: rgb(255,255,255);
color: rgb(100,100,100);
}

/*** Grey title and box option ***/
.right-column-title-grey {
/* clear: both; */
display: block;
margin: 0em 0em 0.5em 0em;
padding: 0.2em 0em 0.2em 0.2em;
background-color: rgb(220,220,220);
color: rgb(100,100,100);
font-weight: bold;
font-size: 1.1em;
}

.right-column-box-grey {
/* float: right; */
width: 13.0em;
margin: 0em 1.0em 0.8em 0em;
padding: 0.4em 0.4em 0.4em 0.4em;
border: solid 0.1em rgb(200,200,200);
background-color: rgb(235,235,235);
color: rgb(100,100,100);
}

/*** Blue title and box option ***/
.right-column-title-blue {
/* clear: both; */
display: block;
margin: 0em 0em 0.5em 0em;
padding: 0.2em 0em 0.2em 0.2em;
background-color: rgb(187,211,247);
color: rgb(100,100,100);
font-weight: bold;
font-size: 1.1em;
}

.right-column-box-blue {
/* float: right; */
width: 13.0em;
margin: 0em 1.0em 0.8em 0em;
padding: 0.4em 0.4em 0.4em 0.4em;
border: solid 0.1em rgb(200,200,200);
background-color: rgb(226,238,252);
color: rgb(100,100,100);
}

/*** Yellow title and box option ***/
.right-column-title-yellow {
/* clear: both; */
display: block;
margin: 0em 0em 0.5em 0em;
padding: 0.2em 0em 0.2em 0.2em;
background-color: rgb(255,236,128);
color: rgb(100,100,100);
font-weight: bold;
font-size: 1.1em;
}

.right-column-box-yellow {
/* float: right; */
width: 13.0em;
margin: 0em 1.0em 0.8em 0em;
padding: 0.4em 0.4em 0.4em 0.4em;
border: solid 0.1em rgb(200,200,200);
background-color: rgb(255,255,191);
color: rgb(100,100,100);
}

/*** Green title and box option ***/
.right-column-title-green {
/* clear: both;*/
display: block;
margin: 0em 0em 0.5em 0em;
padding: 0.2em 0em 0.2em 0.2em;
background-color: rgb(196,221,108);
color: rgb(100,100,100);
font-weight: bold;
font-size: 1.1em;
}

.right-column-box-green {
/* float: right; */
width: 13.0em;
margin: 0em 1.0em 0.8em 0em;
padding: 0.4em 0.4em 0.4em 0.4em;
border: solid 0.1em rgb(200,200,200);
background-color: rgb(224,244,181);
color: rgb(100,100,100);
}

/*** Red title and box option ***/
.right-column-title-red {
/* clear: both; */
display: block;
margin: 0em 0em 0.5em 0em;
padding: 0.2em 0em 0.2em 0.2em;
background-color: rgb(255,176,176);
color: rgb(100,100,100);
font-weight: bold;
font-size: 1.1em;
}

.right-column-box-red {
/* float: right; */
width: 13.0em;
margin: 0em 1.0em 0.8em 0em;
padding: 0.4em 0.4em 0.4em 0.4em;
border: solid 0.1em rgb(200,200,200);
background-color: rgb(255,219,219);
color: rgb(100,100,100);
}

/*** Paragraph text ***/
#right-column p {
margin: 0em 0em 0.4em 0em;
font-size: 1.1em;
}

Hope someone can see what's wrong...
Let me know if you also need the left or middle columns..