PDA

View Full Version : My site looks right in IE, wonky in Firefox - CSS issue?



InOverMyHead
Apr 16th, 2010, 11:05 PM
I'm building a new website. So far, everything is working great in IE, but not Firefox.

Here's the page I've been testing:
http://www.myohmomma.com/test-2

In Firefox, my Jquery Cycle slideshow isn't positioned right and is missing borders. My buttons at the top (About, Contact, Sitemap) have issues at the bottom. My sidebar (which is where I was using Javascript Tabifier) doesn't even show up! The graphic that is meant to appear above my calendar is just below the header.

These have to be CSS issues, right? I've been researching and tweaking, but I'm truly just stumped. I'm new to all of this and I think I'm just in over my head. I've included the CSS for some of the problem areas. Any help would be appreciated.


My wonky buttons at the top:

#about {
display: block;
position:absolute;
right: 208px;
width: 96px;
height: 36.5px;
background: url("images/about_header.png") no-repeat 0 0;
}

#about:hover {
background-position: 0 -36.5px;
}

#about span{
display: none;
}

#contact {
display: block;
position: absolute;
right: 100px;
width: 104px;
height: 36.5px;
background: url("images/contact_header.png") no-repeat 0 0;
}

#contact:hover {
background-position: 0 -36.5px;
}

#contact span{
display: none;
}

#sitemap {
display: block;
position: absolute;
right: 0px;
width: 96px;
height: 36px;
background: url("images/sitemap_header.png") no-repeat 0 0;
}

#sitemap:hover {
background-position: 0 -36px;
}

#sitemap span{
display: none;
}

My Jquery Cycle slideshow:

.slideshow {
position:relative;
left:0px;
height: 300px;
width: 530px;
border-top: 10px solid #2d0a0b;
border-left: 10px solid #2d0a0b;
border-right: 10px solid #2d0a0b;
border-bottom: 25px solid #2d0a0b;
}

.slideshow img {
padding: 0px;
border: 1px solid #ccc;
background-color: #ffffff;
}

#nav {
position:relative;
left:5px;
bottom:21px;
z-index:1;
}


#nav a { background: #2d0a0b; color: #fbb1c0; text-decoration: none; margin: 5px 5px;

padding: 0px 5px; }
#nav a.activeSlide { background: #fbb1c0; color: #2d0a0b; }


My non-existent sidebar:

.sidebar{
position: relative;
top:0px;
padding-top:20px;
padding-right:10px;
padding-left:10px;
padding-bottom:0px;
float:right;
width:350px;
}

.sidebar ul{
list-style-type: none;
margin: 0;
padding: 0 10px 0 10px;
background:#ffffff;
}

.sidebar ul li{
padding: 10px 0 10px 0;
background:#ffffff;
}

.sidebar ul li h2{
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
color: #2d0a0b;
border-top: 1px solid #2d0a0b;
border-bottom: 1px solid #2d0a0b;
padding: 5px 0px 5px 0px;
background:#ffffff;
}

.sidebar ul ul li{
padding: 0;
background:#ffffff;
}


/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */

/*--------------------------------------------------
REQUIRED to hide the non-active tab content.
But do not hide them in the print stylesheet!
--------------------------------------------------*/
.tabberlive .tabbertabhide {
display:none;
}

/*--------------------------------------------------
.tabber = before the tabber interface is set up
.tabberlive = after the tabber interface is set up
--------------------------------------------------*/
.tabber {
}
.tabberlive {
margin-top:1em;
}

/*--------------------------------------------------
ul.tabbernav = the tab navigation list
li.tabberactive = the active tab
--------------------------------------------------*/
ul.tabbernav
{
margin:0;
padding: 3px 0;
border-bottom: 0px solid #778;
font: bold 12px Verdana, sans-serif;
}

ul.tabbernav li
{
list-style: none;
margin: 0;
display: inline;
}

ul.tabbernav li a
{
padding: 3px 0.5em;
margin-left: 0px;
margin-right: 3px;
border: 1px solid white;
background: white;
text-decoration: none;
}

ul.tabbernav li a:link { color: #2d0a0b; }
ul.tabbernav li a:visited { color: #2d0a0b; }

ul.tabbernav li a:hover
{
color: #2d0a0b;
text-decoration:underline;
background: white;
border-color: white;
}

ul.tabbernav li.tabberactive a
{
color: #fbb1c0;
background-color: #2d0a0b;
border: 1px solid #2d0a0b;
}

ul.tabbernav li.tabberactive a:hover
{
color: #fbb1c0;
text-decoration:underline;
background: #2d0a0b;
border-bottom: 1px solid white;
}

/*--------------------------------------------------
.tabbertab = the tab content
Add style only after the tabber interface is set up (.tabberlive)
--------------------------------------------------*/
.tabberlive .tabbertab {
padding:5px;
border:10px solid #2d0a0b;

/* If you don't want the tab size changing whenever a tab is changed
you can set a fixed height */

height:285px;

/* If you set a fix height set overflow to auto and you will get a
scrollbar when necessary */

overflow:auto;
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
display:none;
}
.tabberlive .tabbertab h3 {
display:none;
}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
height:200px;
overflow:auto;
}

drhowarddrfine
Apr 17th, 2010, 05:54 AM
Your problem is with your HTML, not your CSS. You have 9 errors there. Validate for that list.

Did you first test this in Firefox before IE? Never, ever trust IE to do anything right. Firefox shows what you wrote.

InOverMyHead
Apr 17th, 2010, 03:15 PM
I fixed the errors, but my problems persist. Any other ideas? I just can't figure it out!

abduraooft
Apr 17th, 2010, 05:21 PM
Is this what you need ?
#container {/*style.css (line 322)*/
background:#FFFFFF none repeat scroll 0;
float:left;
padding:20px 10px 0;
position:relative;
/*top:0;*/
width:550px;
}
.sidebar {/*style.css (line 363)*/
background:#FFFFFF none repeat scroll 0;
float:right;
margin-left:550px;
padding:20px 10px 0;
position:relative;
/*top:0;
width:350px;*/
}

Excavator
Apr 17th, 2010, 05:53 PM
Hello InOverMyHead,
That's a lot of unnecessary positioning you have there. Maybe it would be better to let the document flow naturally.

Try these changes to your CSS -


#bottomwrapper {
/*position:relative;
top:0px; */
width:920px;
padding: 5px 10px 150px;
background:#ffffff;
clear: both;
}


#bottom {
/*position:relative;*/
width:920px;
background:#ffffff;
}

#OHFunBar {
/*position: relative;
left:0px;
top:0px;*/
width:920px;
height:35px;
background: #f00 url("images/OhFunBarSquare.png");
}



#calendar {
/*position:relative;
left:0px;*/
width:890px;
padding-bottom:5px;
padding-top:5px;
padding-left:5px;
padding-right:5px;
border-top: 0px solid #2d0a0b;
border-left: 10px solid #2d0a0b;
border-right: 10px solid #2d0a0b;
border-bottom: 10px solid #2d0a0b;
background:#ffffff;
}

When posting code in the forum, please use the code tags, [code][/code] - available with the # button in the post edit window.
This will wrap your code in a scroll box which greatly helps the readability of your post.
You can go back and add them to your original post.

InOverMyHead
Apr 22nd, 2010, 11:18 PM
Thank you all for your responses. They've helped me clean up my code. I'm new at this, so I'm learning as I go. Now I realize I don't need all that positioning!

Here's the really, really dumb mistake I was making: I was calling on the wrong stylesheet - the one in my root folder, not my themes folder (as I am building the site in Wordpress.) No wonder the changes I was making had NO EFFECT WHATSOEVER!

InOverMyHead
Apr 22nd, 2010, 11:21 PM
Thanks for the tip on entering code. I cannot figure out how to edit my original post, however. I see an edit button for my last reply, but not for my original post. I hope you don't think I'm ignoring your advice! I will edit my original post as soon as I figure out how to do it!

Excavator
Apr 23rd, 2010, 09:13 AM
I see an edit button for my last reply, but not for my original post. I hope you don't think I'm ignoring your advice! I will edit my original post as soon as I figure out how to do it!

No worries. I think you lose the edit option after a while is why there's no edit button there.