My First Site - Browser rendering & Right Column collapse

[Guest tashiecoo]

Hello all,

 

I am a complete newbie to web design and have no formal education in this area...Well I actually took several tutorials on lynda.com (dreamweaver, photoshop & css) to get me ramped up.

 

Anyhow, I used a free css template from templatemo.com for the foundation of my very first site. I uploaded the files last night and while it looks great on IE, when I open the site on my mac with firefox, it appears all the css for the right is not rendering. some of the background is missing.

 

I also decided to take a look at the site from work today and because I work with data, we have extra wide screen monitors, so when viewing the site, the information in the right column is dropped down to the bottom of the navigation menu.....hope that makes sense...

 

Please let me know if you have any ideas of these two problems. The website is:

 

http://www.tropicalsailaway.com

 

Thank you in advance.

[Wickham]

I noticed that the background-image templatemo_content_bg.jpg for #maincontainer isn't showing in Firefox so the middle of the page is dark red instead of light gray.

 

You have a lot of floated divs which Firefox is not dragging down the background for, so you have to put a div with no float, no height and invisible just before the closing tag to make Firefox drag the background down to cover it:-

 

....................

 

 

 

......................

 

I've shown an inline style but you can make it a class in the stylesheet instead.

 

I can't see the problem with the right column, perhaps my resolution isn't large enough. Since #maincontainer is 900px wide and my resolution is 1024px wide, I can see that the div centers without a problem and I can't understand why it should be different in a larger resolution, it should stay the same width with bigger side spaces.

 

It could be because of a different browser, not the resolution. Dropping down is usually a result of not having enough width for both columns, IE6 is very bad about this. Experiment by reducing the width on one column.

Edited July 30, 2009 by Wickham

[joomlavideos]

Try setting a width for the div #innertube. The div will auto expand unless declarations say otherwise, which may explain why it's pushing the div #reservation down.

 

HTH