website behaviour mozilla :(

monkeymafia · #1 (**permalink**) 06-15-2007, 11:01 PM

hey

The layout of my site is fine in IE, but acts a little strange in mozilla.
this is my site: www.kumar.adsl24.co.uk

if you check the services page. The heading text size is really small in mozilla, infact all the font is small on every page. Whats the work around for this?

any help will be greatlyy appreciated, its making me pull out my hair! thanks in advance.

this is my html code for the services page:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  
  <title></title>
  <link href="guitar.css" rel="stylesheet" type="text/css"/>
  </head>
  
  <body>
  
  <div id="container">

  
  <div id="header">
 <img src="images/logo.jpg" class="logo">
</div>
<div id=headerbar>
 <div id=navigation>
 <a href="index.htm" class="navlink">Home</a>
 <a href="products.htm" class="navlink">Products</a>
<a href="services.htm" class="navlink">Services</a>
<a href="contact.htm" class="navlink">Contact</a>


</div>

 </div> 
  
<div id="body"> 
   <div id="leftcol">
    <div class="verticalmenu"> 
   <ul> 
     <li><a href="index.htm">Home</a></li>
      
     <li><a href="products.htm">Products</a></li> 
     <li><a href="services.htm">Services</a></li> 
     <li><a href="contact.htm">Contact</a></li> 
   </ul> 
 </div>
   </div> 
   
 </div> 
 <div id="maincol">
 
 <div id="content">
<h1 class="areatitle">Services</h1>
<br>
<img src="images/broken2.jpg" class="imgbroken" alt= "broken guitar" 
onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.MozOpacity=0.4;this.filters.alpha.opacity=40" />
<h5 class="areatext">
Does your guitar need maintenance?
</h5>
<p class="areatext">
Whether you need the bridge adjusting or wish to fully customize the guitar,
our guitar techs will be able meet your needs. Depending on the nature of the work
required, we aim to solve your requests within two weeks.
</p>
<br>
<p class= "areatext">
If you have any specific questions or requests please feel free to contact us
by filling out the feedback form located on the contact page.
</p>
<br><br><br><br><br><br><br><br>
<h5 class="areatext">
Purchasing new guitars
</h5>
<p class="areatext">
We realise that new factory shipped guitars are not setup correctly. Whats worse
many retailers choose to sell the guitars in this state! So as soon as you get home
you discover that annoying fret buzz!
</p>
<br>
<p class="areatext">
All guitars that are purchased from us are professionally setup at no extra cost! 
</p>
</div>
 
 
 
 </div>
 <br class="clear"> 





</div> 
 <div id="footer"><p class= "copyright">© 2007 by Mohnish Kumar
 </p></div>
 
</body> 
  
 
 

  
</html>

And this is the code i used for my linked css document:

Code:

/* CSS Document */
html { margin: 0px; }

body { 

background: #999999;

 text-align: center; 
 font: 0.7em Verdana, Arial, Helvetica, sans-serif; 
 margin: 0px; 
 padding: 0px; 
}

#container /* keeps everything in the center, the main section pic was put here */

{

margin: auto;
background: url("images/content.jpg");
text-align: left;
width: 715px;
overflow: hidden;
border-left: 1px solid #999999;
border-right: 1px solid #999999;

padding: 0px 
 /* box model hack */ 
 voice-family: "\"}\""; 
 voice-family:inherit; 
 width: 715px; 
} 
 html>body #container { width: 715px; }



img.logo
{
margin-left: auto;
}


#headerbar/* note this causes problems in firefox */
{

width: 100%;
height: 35px;

background: url('images/nav.jpg');
}



a.navlink
{
float: left;
font-family: verdana;
font-size: 1.2em;
display: block;
height: 35px;
width: 80px;
text-decoration: none;
color: white;
font-weight: bold;
line-height: 40px;
text-align: center;
border-right: 1px solid #CCCCCC;
}

a.navlink:hover


{
color:blue;
text-decoration:none;
background-color:inherit;
}

/*#leftcol{
margin: 0px auto;
float: left;
width: 160px;
height: 550px;
background: url('images/menu.jpg');

}
*/


#leftcol { 
 margin: 0px auto;
 width: 168px;
 height: 550px; 
 float: left; 
 background: url('images/menu.jpg'); 
 padding: 10px 8px 8px 10px; 
 /* box model hack */ 
 voice-family: "\"}\""; 
 voice-family:inherit; 
 width: 152px; 
} 
html>body #leftcol { width: 152px; } 



/* this makes the left menu get rid of bullet points */
.verticalmenu ul { 
linesize: 20px;
 list-style: none; 
 padding: 0px; 
 margin: 0px; 
} 

.verticalmenu a:link, .verticalmenu a:visited, .verticalmenu a:hover { 
 display: block; 
 font: bold 1.1em Verdana, Arial, Helvetica, sans-serif; 
 color: #1A286E; 
 text-decoration: none; 
 padding: 5px; 
 width: 153px; 
 height: 26px; 
 /* box model hack */ 
 voice-family: "\"}\""; 
 voice-family:inherit; 
 width: 143px; 
 height: 16px; 
} 
html>body .verticalmenu a:link, html>body .verticalmenu a:visited, 
html>body .verticalmenu a:hover { 
 width: 143px; 
 height: 16px; 
}

.verticalmenu a:hover { 
 
 background: url('images/hover.gif') no-repeat; 
}


#footer
{
margin: auto;
background: #999999;
width: 715px;
border-right: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #999999;
height: 20px;
margin-top: 30px;

}

p.copyright {
float: left;
color: white;

}

 
}

#content
{

margin: 0px auto;
width: 100%;

}

h1.areatitle
{
font-size: 25px;
font-weight: normal;
color: #330033;
font-weight: bold;
border-bottom: 1px dashed #CCCCCC;
margin-bottom: 5px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
padding: 0;
}

p.areatext
{
font-family: verdana;
font-weight: normal;
font size: 12px;
margin: 0;
padding: 0;
margin-left: 10px;
margin-right: 10px;
text-align: justify;
}

h5.areatext {

margin-left: 10px;

}


img.imgbroken {
border: 2px solid;
float: left;
-moz-opacity:0.4;filter:alpha(opacity=40);cursor:hand"
}

scimitar inc · #2 (**permalink**) 06-19-2007, 02:22 AM

Thnaksss!!!!!!!!!!!!

dtfan14 · #3 (**permalink**) 06-19-2007, 10:46 AM

I usually get sites to act up in IE, Mozilla works great for me.

Cav'lier · #4 (**permalink**) 06-19-2007, 06:53 PM

I've figured out, that mozilla and IE both are horrible in their own way. Maybe if they recognized the same stuff they'd be better off...but the best advice I can give, is just specify font size specifically each time...and the parts where its messed up change that instance

AnnDi · #5 (**permalink**) 06-20-2007, 09:23 PM

have you already fix it?
look just fine to me heading text is large enough, font size is readable too...

monkeymafia · #6 (**permalink**) 06-20-2007, 11:06 PM

thanks for the suggestions guys. the only main problem im having is that in mozilla the actual text in the main content (white box) is all the way up to the left. its fine in IE though. i will try the changes.

AnnDi · #7 (**permalink**) 06-22-2007, 02:26 AM

i know what your problem is!
Clean up you HTML code! you have so many divs that dont serve any purpose. You dont have to declare classes for every single tag.
Keep it simple!
Css file has lot of mistakes, and you cannot move your text to the right cause
your #content is 100% wide and margined to the 0 left and your left navigation laying over the content box, if you write this, its working:

#content {
margin: 0 auto 0 170px;
}

now you can set up paddings for p, for example:
p {
padding: 0 10px 10px 30px;
}

do u really have to have the same menu on the left? get ride of it.

Do it simple, for example:

Code:

<body>
     <div id="container"
   <div id="header"><img....  /></div>
<div id="navigation">
   <ul id="navlist"><!-- just make it float to the left and clear after -->
   <li><a>1st item</a></li>
   <li><a>2nd item</a></li>
   <li><a>3d item</a></li>
   <li><a>4th item</a></li></ul>
   </div>
<div id="leftmenu">
   <ul><li><a>1st item</a></li>
   <li><a>2nd item</a></li>
   <li><a>3d item</a></li>
   <li><a>4th item</a></li></ul>
   </div>
<div id="content">
   <p></p>
   <p class="empty"></p>
   <p></p>
   </div>
<div id="footer"></div>

</div>
</body>

Dont use classes for every tag just use parent ids for CSS:
ul#navlist li, ul#navlist li a:hover, #leftmenu ul li ....

use p,h1,h5 without classes.

dont use so many br just make p.empty with parameters you need.

CSS next...

AnnDi · #8 (**permalink**) 06-22-2007, 02:44 AM

read comments plz

Code:

/* CSS Document */
html { margin: 0px; }

body { 
background: #999999;
text-align: center; 
font: 0.7em Verdana, Arial, Helvetica, sans-serif; 
margin: 0px;                         /* u dont have to write 0px, just 0*/
padding: 0px; 
}

#container {
margin: auto;
background: url("images/content.jpg");
text-align: left;
width: 715px;
overflow: hidden;
border-left: 1px solid #999999;        /* just #999 */
border-right: 1px solid #999999;
padding: 0px 
 /* box model hack */ 
 voice-family: "\"}\""; 
 voice-family:inherit; 
 width: 715px; 
} 

html>body #container { width: 715px; }

img.logo {
margin-left: auto;
}

#headerbar {
width: 100%;
height: 35px;
background: url('images/nav.jpg');
}

a.navlink {
float: left;
font-family: Verdana;
font-size: 1.2em;
display: block;
height: 35px;
width: 80px;
text-decoration: none;
color: white;
font-weight: bold;
line-height: 40px;
text-align: center;
border-right: 1px solid #CCCCCC;
}

a.navlink:hover {
color: blue;
text-decoration: none;
background-color: inherit;
}

/*#leftcol {
margin: 0px auto;
float: left;
width: 160px;
height: 550px;
background: url('images/menu.jpg');
}
*/

#leftcol { 
 margin: 0px auto;
 width: 168px;
 height: 550px; 
 float: left; 
 background: url('images/menu.jpg'); 
 padding: 10px 8px 8px 10px; 
 /* box model hack */ 
 voice-family: "\"}\""; 
 voice-family:inherit; 
 width: 152px; 
} 
html>body #leftcol { width: 152px; } 

.verticalmenu ul { 
linesize: 20px;        /* u missed "-" and did you mean line-height ?*/
 list-style: none; 
 padding: 0px; 
 margin: 0px; 
} 

.verticalmenu a:link, .verticalmenu a:visited, .verticalmenu a:hover { 
 display: block; 
 font: bold 1.1em Verdana, Arial, Helvetica, sans-serif; 
 color: #1A286E; 
 text-decoration: none; 
 padding: 5px; 
 width: 153px; 
 height: 26px; 
 /* box model hack */ 
 voice-family: "\"}\""; 
 voice-family:inherit; 
 width: 143px; 
 height: 16px; 
} 
html>body .verticalmenu a:link, html>body .verticalmenu a:visited, 
html>body .verticalmenu a:hover { 
 width: 143px; 
 height: 16px; 
}

.verticalmenu a:hover { 
 background: url('images/hover.gif') no-repeat; 
}

#footer {
margin: auto;
background: #999999;
width: 715px;
border-right: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #999999;
height: 20px;
margin-top: 30px;
}

p.copyright {
float: left;
color: white;
}

 
}  /* what is it? */

#content {
margin: 0px auto;
width: 100%;
}

h1.areatitle {            /* just h1 would be better */
font-size: 25px;
font-weight: normal;    /* so normal? */
color: #330033;
font-weight: bold;       /* or bold? */
border-bottom: 1px dashed #CCCCCC;
margin-bottom: 5px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
padding: 0;
}

p.areatext {               /* just p would be better*/
font-family: Verdana;
font-weight: normal;
font size: 12px;          /* font-size and your text will become 12px */
margin: 0;                 /* so 0 or */
padding: 0;
margin-left: 10px;       /* 10px? */
margin-right: 10px;     /* 10px? */
text-align: justify;
}

h5.areatext {
margin-left: 10px;
}

img.imgbroken {
border: 2px solid;           /* which color? */
float: left;
-moz-opacity:0.4;
filter:alpha(opacity=40);
cursor:hand"      /* ; */
}

Good Luck!

monkeymafia · #9 (**permalink**) 06-22-2007, 12:11 PM

thanks for the corrections, wow i had alot of mistakes

i made the suggested changes, now it displays okay in mozilla and not IE haha. its just the grey left menu in particular. thanks again though. i shall try further tweaking.

AnnDi · #10 (**permalink**) 06-22-2007, 06:13 PM

I am sorry i dont have IE right now and i cannot see a problem.
What is wrong with your left menu there?

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode