News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

Works fine on I.E but not on Mozilla

Started by mickscool, June 06, 2005, 12:59:37 PM

Previous topic - Next topic

mickscool

Hi Friends,
I'm tryin to create an online portfolio using HTML and CSS,but my site works fine on I.E but when I try to view it in mozilla,everything gets distorted...i tried to fix it but failed and reached this place for help.Please help me friends if you can,you can visit the site at:
http://www.geocities.com/mickscool/career.html [nofollow]
To view,the stylesheet and webpages go to:
http://www.geocities.com/mickscool/ [nofollow]

Waiting for you replies..
Thanks
Mick

p.s:Any comments on how to make my site look better from you experts would also be invited.

rudoka

I looked at your page using Firefox and IE and both look the same. Except the text size.
  So if yuo tell in more details what is different would help some more.
  Anyway loking at the CSS I can surely say that it is not absolutely correct. I know because I had problems with making my site look the same in IE and Firefox.

A more correct code would lok somethinglike this:
  #car_body b{
color: #6495ed;
font-family: "Viner Hand ITC", Arial, sherif;
font-size: 14px;
}


   First of all, it might sound strange but you need to put a space after every colon :. That's the css standard and Firefox (probably the Mozilla too) will not interpret it correcly.
   Second. In the font-family you have to separate the fonts with ,
   Third. The text size should be in pixel, if you want to appear the same way in (almost)every browser. I found out that the small, normal, big and the numeric values mean different things in FF and IE. Using px sizes, I got them to be the same.
   This is just what I saw from the first look, and you should see if changing the stylesheet solves the problems. You can also try to validate the stylesheet, on the official page, to see where it is not correct according to the standards (and NOT IE). Now I don't remember the   adress.

Rudolf

mickscool

Hi rudoka,
Thanks for that excellent reply,actually it was my first try wid css ..so sorry for the mistakes...but now i've validated them and most of them are gone.But I dont know why,after validation  my background-color is not showing("DarkGray or #a9a9a9;").
And,there's still some distortaion when i view these pages in FireFox.I have defined a rectangular box to show the body contents,this box when wrking in I.E expands automatically if the text-content is too big to fit inside the box ,but for mozialla it remains fixed.
And finally,the padding around the image shows slight distortion in mozilla.
Can someone please tell me where I am goin wrong now,
Thanks.

rudoka

Hey, you're welcome. I know I stood some very long days figuring out this. It was also my very first attempt to modify a website template. I was frustrated over it for days, until finally I understood what was the problem. Accidentally!  :'(

I'm not sure about the other problems, as I said from the first look FF and IE seemed the same.
I just know that even if the css is correct there are things that different browsers will handle differently. Exactly the type of sligh differences that you mention.
The only thing I can think of now is to check with Dreamweaver, this seems to know pretty much what's happening in different browsers. When I'll have a little spare time I'll try to do it.

Rudolf

[Unknown]

Find:

" layout_career.css"

Replace:

"layout_career.css"

Find:

#body {
       background-color : #A9A9A9;
       color : black;
      }

Replace:

body, #body {
       background-color : #A9A9A9;
       color : black;
      }

-[Unknown]

mickscool

Thanks Unknown,
Tht did the trick..but i didnt understood why we had to add "body,#body" to get it work instead of only "#body"?
Hey rudoka,I dont have dreamweaver installed but i think i'll keep tryin to fix the minor problems now.But Friends,I just want to ask you one final doubt.There's a lot of flickering when I click the link to move to a different page.Is [nofollow] there a way,that only the body contents change and the header(or common part to all the pages) remain the same??
Thanks
Micks

[Unknown]

Quote from: mickscool on June 06, 2005, 04:56:21 PM
Thanks Unknown,
Tht did the trick..but i didnt understood why we had to add "body,#body" to get it work instead of only "#body"?
Hey rudoka,I dont have dreamweaver installed but i think i'll keep tryin to fix the minor problems now.But Friends,I just want to ask you one final doubt.There's a lot of flickering when I click the link to move to a different page.Is there a way,that only the body contents change and the header(or common part to all the pages) remain the same??
Thanks
Micks

#body

Means:

Any element which has the "id" attribute set to exactly "body".

body

Means:

Any element that has a tag name of exactly "body".

Some or all of your "body" elements did not have any id on them, and hence were not being matched by the first rule.

-[Unknown]

mickscool

Hey thanks Unknown,
for that nice explanation..but if possible please clear this last doubt of mine too.
I've a margin that surrounds my text body and i set it to bottom..and it expands accordingly  iin I.E if text to is too large to fit in the box,but why its not workin in Mozilla.

margin : 20px auto 0;

Please help me..if you guys can give little more time to this thread.
Thanks

rudoka

#8
You could use an inline frame below the link and make them to change the source of this frame.

<iframe src="home.html" name="iframe" frameborder="0" width="700" height="600"></iframe>


and use the links as follows:
<a href="home.html" target="iframe">Home</a>
<a href="resume.html" target="iframe">Resume</a>
<a href="objective.html" target="iframe">Objective</a>
...
<a href="contact.html" target="iframe">Contact</a>

Your carreer.html would be your header with the links. Your home.html that pic (and whatever else you want on the main page). And similar the rest. You would have to take out the header from all of the "sub-pages", of course ;)

On the other matter, Dreamweaver said nothing about your css, except that the two word-spacing properties are not supported in IE 3,4,5. But that shouldn't be a problem, if you're using IE 6+

  With the margin property you might want to try this:
margin : 20px auto 0 auto;
  Right now you're not explicitly saying what the left margin should be, so it could be that the browsers interpret it differently (thus behave differently). That's my guess, anyway. Doesn't hurts a try.  ::)

Rudolf

rudoka

Oh, by the way. Correct the " layout_carreer.css" in ALL your pages.  ;D

mickscool

Hi rudoka,
I'm tryin to implement inline frames as you said but i am not able to do so,for eg.here [nofollow]'s my career.html body part:
Quote
<body>
  <div id="left">CAREER</div>

  <div id="script">
         <script type="text/javascript" src="script.js"></script>
  </div> 

  <div id="h_menu">
     
         [<a href="home.html" target="iframe">Home</a>]
         [<a href="resume.html" target="iframe">Resume</a>]
         [<a href="obj.html" target="iframe">Objective</a>]
         [<a href="skillset.html" target="iframe">Technical Skillset</a>]
         [<a href="certification.html" target="iframe">Certification</a>]
         [<a href="experience.html" target="iframe">Work Experience</a>]
         [<a href="education.html" target="iframe">Education</a>]
         [<a href="contactus.html" target="iframe">Contact</a>]

  </div>

  <iframe src="home.html" name="iframe" frameborder="0" width="700" height="600"></iframe>
  <iframe src="resume.html" name="iframe" frameborder="0" width="700" height="600"></iframe>
  <iframe src="obj.html" name="iframe" frameborder="0" width="700" height="600"></iframe>
  <iframe src="skillset.html" name="iframe" frameborder="0" width="700" height="600"></iframe>
  <iframe src="certification.html" name="iframe" frameborder="0" width="700" height="600"></iframe>
  <iframe src="experience.html" name="iframe" frameborder="0" width="700" height="600"></iframe>
  <iframe src="education.html" name="iframe" frameborder="0" width="700" height="600"></iframe>
  <iframe src="contactus.html" name="iframe" frameborder="0" width="700" height="600"></iframe>

</body>

And what to do for the head elements in each page,i.e
Quote
<head>
   <title>
    WWW.JHUTTY.COM [nofollow]
   </title>
   <link type="text/css" rel="stylesheet" href= "layout_career.css" /> 
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

And that margin modification didnt helped..anyways please tell me how to implement these inline frames..as i find that it would serve my purpose..and is is possible to remove the vertical and horizontal scrollbars which we get with frames??

Thanks a lot,
Mick

mickscool

Hi rudoka,
Ok before you reply to my previous thread,I have fixed most of the problems...for eg,my career.html now look's like this:
Quote
<head>
   <title>
    WWW.JHUTTY.COM [nofollow]
   </title>
   <link type="text/css" rel="stylesheet" href= "layout_career.css" /> 
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<body>
  <div id="left">CAREER</div>

  <div id="script">
         <script type="text/javascript" src="script.js"></script>
  </div> 

  <div id="h_menu">
     
         [<a href="home.html" target="iframe">Home</a>]
         [<a href="resume.html" target="iframe">Resume</a>]
         [<a href="obj.html" target="iframe">Objective</a>]
         [<a href="skillset.html" target="iframe">Technical Skillset</a>]
         [<a href="certification.html" target="iframe">Certification</a>]
         [<a href="experience.html" target="iframe">Work Experience</a>]
         [<a href="education.html" target="iframe">Education</a>]
         [<a href="contactus.html" target="iframe">Contact</a>]

  </div>

  <iframe src="home.html" name="iframe" frameborder="0" scrolling = "no" width="870" height="600"></iframe>
 
</body>

As u see in the code,I'm fixing the width and height of the frame..so incase my text is too big.....it doesnt shows the text that falls outside of the box,as i've disabled scrolling option....I want to have different width and height paramters for "resume.html" and "experience.html"...is that possible...to use more then different frames for these two..but when my page opens up..it should only display the "iframe i.e home.html"..and the other two frames should be invisible unless someone clicks the "resume.html" or "experience.html" links.
Please tell me the answer the to this question.

rudoka

   Yes, your first approach was kind of wrong. I even thought that you might do so reading my answer.  ;) I realise I might been a little confusing in my explanation. But you worked out just fine.

Theoretically it would be possible to declare two iframes having two different styles(CSS), and on the links with some Javascript to change their display property to none and visible as needed. You would have to set their position too, to be in the same place (one over the other).

   But that's just theoretical, I'm not quite clear about how to do it. I'll loook into it.

Rudolf

rudoka

Just a quick note, in the meantime.

You might want to consider renaming your career.html to index.html.
This way http://www.geocities.com/mickscool would open your site, and not the file listing. If you don't want the listing to show, of course.

Rudolf

mickscool

Hi rudoka,
I've no problems with you saving my site.Ok,now I have fixed almost everything..but just one last thing left.After I added the "iframe's".....my page is giving lots of validation errors...And I think due to this error the resume link on mozilla is showin a little annoying behaviour.Please help me with this one..and im finish troubling you...lol
Mick

rudoka

#15
I supose by annoying behaviour you mean that the frame goes under the links when you try to scroll the page.

  It happens because your iframe size (3600) is smaller then the text you're having and the Firefox scrolls the content when you move the scrollbutton (on your mouse). Actually I saw that there is some text (the last 3 or 4) lines not visible.
Enlarging the height to 3800 seems to work, here on my localhost. It's not a problem if it's bigger anyway. Let me know if it works.

Also you should change the scrolling = "no" into scrolling="no". It doesn't seems to affect the look, but it's more correct ;).

Rudolf

mickscool

Hi rudoka,
Evertyhing works fine now..except tht the validation for my index.html page throws 43 errors,can you tell me how to make it error-free,here's the complete code for index.html:
Quote
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd [nofollow]">
<html xmlns="http://www.w3.org/1999/xhtml [nofollow]" lang="en" xml:lang="en">
<head>
   <title>
    WWW.JHUTTY.COM [nofollow]
   </title>
   <link type="text/css" rel="stylesheet" href="layout_career.css" /> 
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <div id="left">CAREER</div>

  <div id="script">
         <script type="text/javascript" src="script.js"></script>
  </div> 

  <div id="h_menu">
     
         [<a href="home.html" target="iframe">Home</a>]
         [<a href="resume.html" target="iframe">Resume</a>]
         [<a href="obj.html" target="iframe">Objective</a>]
         [<a href="skillset.html" target="iframe">Technical Skillset</a>]
         [<a href="certification.html" target="iframe">Certification</a>]
         [<a href="experience.html" target="iframe">Work Experience</a>]
         [<a href="education.html" target="iframe">Education</a>]
         [<a href="contactus.html" target="iframe">Contact</a>]

  </div>
  <iframe src="home.html" name="iframe" frameborder="0" scrolling = "no" width="870" height="3600"></iframe>
  </head><body></body>
</html>

Thanks for all your help.

rudoka

lol
You wrote all the content in the header of the page.
Look  ;):
...
<iframe src="home.html" name="iframe" frameborder="0" scrolling = "no" width="870" height="3600"></iframe>
  </head><body></body>
</html>


Move the </head><body> part after the <meta> tag (before the first <div>). After that your page will be fully "XHMTL 1.0 Transitional" valid.

As a last estethic modification, change the scrolling =" no" in the iframe tag. :) Just to make it look perfect.

Rudolf

mickscool

I intenionally moved all the content from body to the head...because one of the experts on other site told me to do so..lolz..anyways it doesnt helps moving it to body either.
Thanks

rudoka

What do you mean "it doesn't helps"?
I did and it helped, there was no problem with the code whatsoever.
Anyway, the errors you get are from the code added by the Yahoo.
The part where it says
<!-- text below generated by server. PLEASE REMOVE -->
...
...


I don't know what to do about that one, I don't even know what is. Try to remove it, or something. Though I think it's added on the fly by the Yahoo
   As you can see the rest of your page is ok, so I would say not to worry about.

Now everything seems ok.  ;)
Rudolf

Advertisement: