[SOLVED]Site in Opera, IE and Firefox

[dannzyx]

Hey people,

First off I want say that cmsms is a great piece of software.
It introduced me to tableless sites and CSS (which is harder to code then it looks)

But while making my first CMSMS based site I ran into some css problems.
The site's appereance is different in 3 browsers:

-Firefox, my menu is gone (used a custom menu that's manually linked)
-Opera, Site works perfectly
-IE, Site works, only the header is a little shifted..... doesnt look nice.

Dont know what I did wrong as I been searching for a solution for this for about 2 weeks now.
The stylesheet:

Code: Select all

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
           font-size: 11px;
	color: #5E5E5E;
	text-align: center;
	margin: 0px;

	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	background-image: url(images/backfill.jpg);

}



#wrapper {
	width: 900px;
	padding: 0px;
	height: auto;
	text-align: left;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

#header {
margin: 0px;
padding: 0px;
height: 87px;
width: 900px;



}

html>body #container {
height: auto;
}
#container {
	padding: 0px;
	margin: 0px 0px 0px 0px;
	background-attachment: scroll;
	background-color: white;
	background-repeat: repeat-y;
	background-position: 0px 0px;
	height: 1%;
	width: auto;
	background-image: url(images/new_13.gif);
}
#left {
	margin: 0px;
	width: 127px;
	height: auto;
	float: left;
	background-image: url(images/bannerfill.gif);
	padding: 0px;
}
#nav {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 5px;
list-style-image: none;
list-style-type: none;
}
#nav li {
margin: 0px 0px 0px 0px;
padding: 0px;
display: block;
background-attachment: scroll;
background-repeat: no-repeat;
background-position: 0px 50%;
}
#nav li a:link, #nav li a:visited, #nav li a:active {
color: #666;
text-decoration: none;
display: block;
margin: 0px;
padding: 3px 15px 3px 15px;
width: 130px;
}
#nav li a:hover {
color: #999;
text-decoration: none;
}
#center {
	height: auto;
	width: 176px;
	float: left;
	line-height: 1.8em;
	margin: 0px;
	padding: 0px;
	text-align: right;
}

#centerrechts {
	height: auto;
	width: 500px;
	float: right;
	line-height: 1.8em;
	margin: 0px;
	text-align: right;
	padding-top: 0px;
	padding-right: 30px;
	padding-bottom: 0px;
	padding-left: 0px;
}



#right {
	text-align: left;
	height: auto;
	width: 773px;
	float: right;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin: 0px;
}
.clearer {
font-size: 0px;
line-height: 0px;
display: block;
margin: 0px;
padding: 0px;
clear: both;
height: 0px;
width: auto;
}
#footer {
	height: 83px;
	margin: 0px 0px 0px 0px;
	text-align: left;
	padding: 0px 0px 0px 0px;
background-image: url(images/new_16.gif);

}
#footer p {
color: #999;
margin: 0px auto 0px auto;
padding: 0px;
}
#footer a:link, #footer a:visited, #footer a:active {
color: #999;
text-decoration: none;
}
#footer a:hover {
color: #ccc;
text-decoration: none;
}





/* Menu styles */

#menu {
 
   width: 900px;
   margin: 0;
}

#menu ul {
   margin: 0;
   padding: 0;
   height:87px;
}

#menu li {
   float: left; /* makes the list horizontal */
   list-style: none; /* hides the list bullet */ 
   margin: 0 ;
 }


  #home
  {
    display: inline-table;
    width: 94px;
    height: 87px;
    background: url(images/new_02.gif);
padding: 0,0,0,0;
margin: 0,0,0,0;

  }
  #home:hover
  { 
    background: url(images/over_02.gif);
}

  #pics
  {
    display: inline-table;
    width: 83px;
    height: 87px;
    background: url(images/new_03.gif) no-repeat 0 0;
  }
  #pics:hover
  { 
    background: url(images/over_03.gif) no-repeat 0 0;
  }



  #log
  {
    display: inline-table;
    width: 77px;
    height: 87px;
    background: url(images/new_04.gif) no-repeat 0 0;
  }
  #log:hover
  { 
    background: url(images/over_04.gif) no-repeat 0 0;
  }



  #downloads
  {
    display: inline-table;
    width: 137px;
    height: 87px;
    background: url(images/new_05.gif) no-repeat 0 0;
  }
  #downloads:hover
  { 
    background: url(images/over_05.gif) no-repeat 0 0;
  }


  #guestbook
  {
    display: inline-table;
    width: 144px;
    height: 87px;
    background: url(images/new_06.gif) no-repeat 0 0;
  }
  #guestbook:hover
  { 
    background: url(images/over_06.gif) no-repeat 0 0;
  }



  #contact
  {
    display: inline-table;
    width: 123px;
    height: 87px;
    background: url(images/new_07.gif) no-repeat 0 0;
  }
  #contact:hover
  { 
    background: url(images/over_07.gif) no-repeat 0 0;
  }



/* text styles */

a {text-decoration:none; font-weight: bold; font-family: Verdana; font-size:11px;}
a:link {color:#8FC101}
a:visited {color:#8FC101}
a:hover {color:#405500}
a:active {color:#8FC101}

h1 {
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #405500;
font-weight:normal;
margin: 0px;
padding: 0px;
}

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
margin: 0px;
padding: 0px,0px,0px,0px;
line-height:15px;

}

.newssummarypostdate {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #8FC101;
}

The template I built:

Code: Select all

<head>
 {stylesheet}
<title>{sitename}</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
</head>
</__body>
<div id="wrapper">
<div id="header">

<img src="images/new_01.gif" width="169" height="87"><a id="home" href="index.php?page=home" title="home"></a><a id="pics" href="index.php?page=pictures" title="pics"></a><a id="log" href="index.php?page=log" title="log"></a><a id="downloads" href="index.php?page=downloads" title="pics"></a><a id="guestbook" href="index.php?page=guestbook" title="downloads"></a><a id="contact" href="index.php?page=Contact" title="contact"></a><img src="images/new_08.gif" width="73" height="87">


</div>
<div id="container">
  <div id="right"><img src="images/new_10.gif" width="773" height="55" /></div>
  <div id="left">
  <div align="left"><img src="images/new_09.gif" width="127" height="378" /><br>
  </div>
</div>

<div id="center">
{news}
</div>

<div id="centerrechts">
{content}
</div>


<div class="clearer"> </div>
</div>
<div id="footer"> <br><br><br><br><br><p align=center> design by donnie - powered by CMSMS<p>
</div>

If anybody can help me it would be great, I cant figure it out and my CSS isnt that good (yet)
Thanks in advance!

edit: A picture of all 3 browsers and the site's appereance
http://www.mcoptimus.com/browsers.png

And the site online:
http://www.mcoptimus.com/cms/

[Dr.CSS]

Number of things I can see...

1) Why aren't you using the menu manager, the main reason I went with a CMS was so I didn't have to hand code menus?...

2) You have references to div IDs that don't exist such as #nav, #menu, #menu ul, etc....

3) Most likely it won't show in Firefox because the links have no height or it needs a div around it that has height...

4) And again why would anyone not use the menu manager, I've made an amazing amount of menus including image swaps/rollovers with it, in fact I've never found an image based menu I couldn't do with it...

[dannzyx]

Dont have the skill and experience in CSS to do it with the menu manager yet.

And yes I dont use those ID's because this is just my base css template, I have some that do use the menumanager.

[Dr.CSS]

Fix these, at least the first one and it may help, w/o a doctype the browser kind of doesn't know how to handle it, cept IE which you could throw anything at and it will guess what you want as it's used to messy code front and back...

If you are using the ID of the link to do the images etc. in menu manager you can use id="{$node->alias}"...

This has been discussed on the board many times, specially by me...

Result: 0 errors / 12 warnings

line 1 column 1 - Warning: missing declaration
line 10 column 1 - Warning: missing
line 9 column 1 - Warning: missing
line 12 column 1 - Warning: lacks "alt" attribute
line 12 column 61 - Warning: proprietary attribute "width"
line 12 column 61 - Warning: proprietary attribute "height"
line 12 column 141 - Warning: proprietary attribute "width"
line 12 column 141 - Warning: proprietary attribute "height"
line 12 column 484 - Warning: lacks "alt" attribute
line 17 column 19 - Warning: lacks "alt" attribute
line 19 column 21 - Warning: lacks "alt" attribute
line 79 column 91 - Warning: trimming empty
Info: Document content looks like HTML Proprietary

[dannzyx]

That doctype tip did the trick, in firefox...
IE now doesnt even show the menu. ill try defining widths and heights.


Any other great tips, except for using the menu manager .

[Dr.CSS]

Yea try giving your links class instead of id then use .home not #home...

[dannzyx]

Just tried this, which I read on some site:

Code: Select all

.home {
display: inline-table;
background: url(uploads/theme/new_02.gif);
height: 1%;
min-height: 87px;

}
html>body .home {
    display: inline-table;
    background: url(uploads/theme/new_02.gif) no-repeat 0 0;
    width: 94px;
    height: 87px;
}

Doesnt work either, all browsers work now, except for IE which still removes the entire menu.
Also tried the class tip.

[Dr.CSS]

I don't see any menu, Firefox 2.0.0.14...

[dannzyx]

Saw that yeah,
ill recode the site today or tomorrow.

In the meantime, the solution:

Code: Select all

<img src="images/new_01.gif" width="169" height="87" /><a href="#"><img src="images/new_02.gif" width="94" height="87" style="opacity:1;filter:alpha(opacity=100)"
onmouseover="this.style.opacity=0.8;this.filters.alpha.opacity=80"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"></a>

Not that pretty but it works.

Thanks for all the help!
No doubt you'll hear from me again