Jump to content

Hi, another newbie needs help with Firefox vs. IE...


seattle_rockstar

Recommended Posts

Hi, I'm having issues. I have a navbar with images for links that is placing correctly in IE but in Firefox is pushed so far down that I can only see the very tops of the images. They are also being cut off, and I'm not understanding why it's coming up differently in the two browsers. This is the first webpage I've done from scratch (well with my bf's help) but since we're both newbs we're pulling our hair out. I have the file zipped (since it's not online yet) and was wondering if someone could take a look at it for me. Sorry if this seems like too easy a fix, but it's driving me crazy. Thanks.

 

Ash.

Link to comment
Share on other sites

Sorry, this is the code:

 

 

Culture Sculptor | The art of business culture

 

 

 

 

.

 

 

CS_bannerlogo_main.gif

How We Can Help You

Who We Are

Creative Leadership

What's Being Said

How To Reach Us

 

 

WELCOME TO CULTURE SCULPTOR

we?re a bit different?

Many consultants have their own systems which they will propose you adopt. Sculptors must let their medium tell them what it needs to be. That's how we bring out the best in you and your company. We research, consult, question, facilitate, think, challenge, train, present, produce, develop, create... for you, with you, near you, around you... you.

 

(Note: Roll over the rock with your mouse to see a graphical representation of what it's like to work with us.)

 

 

 

Link to comment
Share on other sites

It might help you all to see the CSS as well, huh? My bad.

 

html {

margin:0;

padding:0;

background:#FFFFFF;

color:#000;

}

 

body {

min-width:750px;

margin:0;

padding:0;

background:#FFFFFF;

color:#000;

}

 

#header {

background:#ffffff;

}

 

#container {

background:#ffffff;

margin:0 auto;

font-family: Ariel, Helvetica, sans-serif;

width:750px;

}

#container img {

border:0;

}

 

#nav {

background:#ffffff;

}

 

#main {

background:#ffffff;

float:left;

width:423px;

}

#sidebar {

background:#ffffff;

background-image: url(images/marble.gif);

background-position: left;

background-repeat: no-repeat;

float:right;

width:327px;

height:327px;

}

 

#sidebar p {

text-align: (430 500) center;

}

 

#footer {

background:#ffffff;

clear:both;

}

 

#nav li

{

padding-right: 1px;

display: inline;

font-size: 1em;

}

 

#nav ul

{

margin: 0px;

padding: 0px;

}

 

#how a:link {

background-image: url(images/hwchy_button1.gif);

background-repeat: no-repeat;

color: #FFFFFF;

background-color: inherit;

}

 

#how a:hover {

background-image: url(images/hwchy_button2.gif);

background-repeat: no-repeat;

color: #FFFFFF;

background-color: inherit;

}

 

#who a:link {

background-image: url(images/who_button1.gif);

background-repeat: no-repeat;

color: #FFFFFF;

background-color: inherit;

}

 

#who a:hover {

background-image: url(images/who_button2.gif);

background-repeat: no-repeat;

color: #FFFFFF;

background-color: inherit;

}

 

#cl a:link {

background-image: url(images/cl_button1.gif);

background-repeat: no-repeat;

color: #FFFFFF;

background-color: inherit;

}

 

#cl a:hover {

background-image: url(images/cl_button2.gif);

background-repeat: no-repeat;

color: #FFFFFF;

background-color: inherit;

}

 

#wbs a:link {

background-image: url(images/say_button1.gif);

background-repeat: no-repeat;

color: #FFFFFF;

background-color: inherit;

}

 

#wbs a:hover {

background-image: url(images/say_button2.gif);

background-repeat: no-repeat;

color: #FFFFFF;

background-color: inherit;

}

 

#reach a:link {

background-image: url(images/reach_button1.gif);

background-repeat: no-repeat;

color: #FFFFFF;

background-color: inherit;

}

 

#reach a:hover {

background-image: url(images/reach_button2.gif);

background-repeat: no-repeat;

color: #FFFFFF;

background-color: inherit;

}

Link to comment
Share on other sites

Well the quick answer is that Firefox is showing you what you wrote.

 

Firefox expects you to know what you are doing and shows you what you wrote, mistakes and all.

 

IE assumes you do not know what you are doing and so ignores your mistakes and shows you what "it thinks" you want.

 

IE 8 is going the way of Firefox, so best get it right in Firefox (standards compliant) and then fix it in IE 7- using IE Conditional Comments.

Link to comment
Share on other sites

It's difficult to understand what the problem is without an online page to look at and download all your code with images, but I made nmy own images 100*125px and tried your code.

 

I could only see a minor difference between IE7 and Firefox where Firefox showed the WELCOME and Note: text about 10px lower. This is due to the default top margins being different in IE7 from Firefox and I made them the same by adding this style:-

 

h1, #sidebar p { margin-top: 5px; }

 

You are using the XHTML 1.1 doctype but this will probably give problems in IE6; this board recommends HTML 4.01 (which will soon be superseded by HTML 5). XHTML 1.0 can be used with a content="text/html" which just processes the page as HTML, so what's the point of using XHTML. XHTML should be used with XML content type instead of text/html which doesn't work in IE6.

Link to comment
Share on other sites

Change the doctype. XHTML 1.1 MUST be served as XML. There is no choice in the matter and soon as you do that IE will puke as it does not support XHTML.

 

Best switch to HTML... but if you must, then use XHTML 1.0 which as mentioned may be served as HTML but should not. It is about using the right tools for the job. You can hammer a nail with the handle of a screwdriver, but you should not, so use a hammer right?

 

XHTML was created to be used with XML languages like MathML and SVG. If you do not use those languages then XHTML is the wrong tool.

Link to comment
Share on other sites

Your doctype is still wrong - this:

br />"http://www.w3.org/TR/html4/loose.dtd">



does not exist.

 

For starters, forget loose and transitional - the point is to write code as clean as possible, so go with strict. and that should look like so:





Whaterver


Then, you're using inline styling on your h1 tag - there are only very few situations, when that is the best solution.

 

In your CSS, you unnecessarily repeat all kinds of styles - I start my CSS out with a

* {
margin: 0;
padding: 0;}

that sets all different browser settings to zero and avoids lots of discrepancies. Some here prefer to only apply this 'zero-setting' to those tags that actually do have a padding and/or margin, I prefer this shortcut.

 

Then, for example, you apply the background color and text color to your html tag - that means that EVERYTHING will have those colors - instead of needlessly repeating, the only other time you need to ever mention them again would be if you wanted something to be DIFFERENT. Also, I never mention the html tag - there's nothing between the html and body tag, so no reason to even mention both - most I've seen starts with the body tag, and never mentions html - don't know whether or not it's wrong to address html in the stylesheet, but using both html and body is clearly redundant.

 

And as to looks - very bland and not-pulled-together. And when I ran my mouse over the rock, NOTHING happened.

Link to comment
Share on other sites

Thanks Thelma. Everything you said was very helpful. I've taken to heart your advice and made the correct changes to the doctype and set the margins to 0 as you suggest.

 

As for the rock, I haven't put the rollover code in yet and just want to figure out the rollover links discrepancy on the page. Firefox shows my bg images much lower than they should be in the navlist. Any suggestions would be appreciated.

Link to comment
Share on other sites

The nav images are pretty much aligned now in Firefox Mac, but the "How can we help you" doesn't show up either as a link or a rollover.

 

I also noticed that you have an empty "header" div. You could put your nav within the header div and put the Culture Sculptor image as a background image in the header div. Also you have given your "nav p" a width of 158px which x6 = 948px, whereas your container width is 750px.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...