display’s all out in mozilla

@Css_CalavJan 15.2005

hi guys,

can anyone help me out or point me in the right direction with regards to webpage layout across different browsers?

i have made my website – ~~[url]~~www.deskjetmodels.co.nz[/url] – and designed it for IE6. now i downloaded mozilla firefox and when i veiw it it comes out all different.

now how to i tweak my existing webpage so it will display well in both browsers?

and help, tips, past experiance would be much appriacated!!

here is one of the main css files –

~~[url]~~www.deskjetmodels.co.nz/css/model.css[/url]

to post a comment

CSS

28 Comments(s) _↴

@TriumphJan 15.2005 — #[i]Originally posted by Css_Calav [/i]

[B]...designed it for IE6. now i downloaded mozilla firefox and when i veiw it it comes out all different.[/B][/QUOTE] Now you know the importance of building websites that adhere to web standards. ?

[URL=http://search.barnesandnoble.com/booksearch/isbnInquiry.asp?isbn=0735712018&itm=1]Click here and enjoy[/URL]

@Css_CalavauthorJan 15.2005 — #thanx!

i thought i was doing the right thing by designing my site with css xhtml etc. but now i have the problem of browser compatibility.

anyone else with some help?

@toicontienJan 15.2005 — #Design first in Firefox. That browser is based on the Gecko rendering engine, which to date is the truest to the standards. When it doesn't look right in IE-Win, it's either a positioning problem (Fix: position the element relative) or a box model problem (IE5 and IE6-Quirks mode interprets it wrong).

Get well acquainted with the standards. Then head to http://www.positioniseverything.net to read up on most of the known CSS bugs.

Know that adding position: relative; to an element's style declarations will fix most IE-Win bugs. And oddly enough using the following hack will cure even the most perplexing bugs:

<i>
 </i>/* IE-Win needs a bogus height or minor to major display problems occur */
 * html #someID { height: 1px; }
 /* End IE5-Mac hiding */

@TriumphJan 15.2005 — #[i]Originally posted by Css_Calav [/i]

[B]i thought i was doing the right thing by designing my site with css xhtml etc. but now i have the problem of browser compatibility. [/B][/QUOTE] You are doing the right thing by designing with css and xhtml but designing it for one browser where the mistake lies. ? Web standards will help you avoid that (besides browser compatibility is not a new thing that came along with css). I highly suggest the book mentioned above.

@Css_CalavauthorJan 16.2005 — #thanx for the links guys!

looks like i need some hacks!

can some look at it in mozzilla and IE and tell me please on what area's it is displaying wrong? eg, i think i need the box model hack is that correct?

@TriumphJan 16.2005 — #The links on the left are overlapping the main text when viewed with Safari.

@Css_CalavauthorJan 16.2005 — #thanx, what would i need to do to fix this?

can you help me out for this one to get the ball rolling?

would be very useful if you can

@TriumphJan 16.2005 — #[i]Originally posted by Css_Calav [/i]

[B]thanx, what would i need to do to fix this?

can you help me out for this one to get the ball rolling?

would be very useful if you can [/B][/QUOTE]

<i>
 </i>#left {
 width: 185px;
 float: left;
 }
 
 .payment_pics{
 float: left;
 margin-top: 20px;
 margin-left: 31px;
 }
 
 #navcontainer {
 width: 185px; 
 }
 
 #navcontainer ul {
 margin: 0;
 padding-top: 15px;
 list-style-type: none;
 font: bold 12px/19px Verdana, Arial, Helvetica, sans-serif;
 text-indent: 30px;
 letter-spacing: 1px;
 }
 
 #navcontainer a {
 display: block;
 width: 190px;
 height: 10px;
 }
 
 #navcontainer a:link, #navcontainer a:visited {
 background: url(/images/navbutton.gif);
 color: #000000;
 text-decoration: none;
 }
 #navcontainer a:hover {
 background: url(/images/navbutton_over.gif);
 color: #A5003B;
 text-decoration: none;
 }
 
 #navcontainer li a#current {
 background: url(/images/navbutton_over.gif);
 color: #A5003B;
 text-decoration: none;
 }

First of all you have #navcontainer at 185px inside of left at 185px. Then you try to put a wider section inside of it (#navcontainer a is at 190px) so it is going to spill over to the right. Then on top of that you have the #navcontainer ul indented 30px (I assume for the airplane pic beside it when you rollover) which compounds the issue.

I would make left and divcontainer wider in addition to the box model hack and that should help your problem. ?

@Css_CalavauthorJan 17.2005 — #thanx very much Triumph!

will get on to it!

@Css_CalavauthorFeb 06.2005 — #Hi guys,

im having real trouble with all these hacks that i need to having my site display like it does in IE.

this is a page with not much on it.

http://www.deskjetmodels.co.nz/examples.php

the css file im working on is

http://www.deskjetmodels.co.nz/css/model_1.css

i want to get the center nav and the left nav displaying correctly in mozzila before i move on to other area's of the site.

i have made the nav container wider like Triumph suggested and i added in "postion: relitave;" not sure if this is right or not. im haveing some trouble with the box hack. i read the links in this thread but they are a bit confusing for me not really understanding it.

if anyone could give me a hand, some tips would be very gratefull!

here is the css for the nav's

[CODE]
 #navcenter ul
 {
 font: bold 12px/14px Verdana, Arial, Helvetica, sans-serif;
 text-align: left;
 vertical-align: middle;
 margin: 0;
 padding: 0;
 padding-left: 2.5em;
 list-style-type: none;
 border-bottom: 1px solid #665;
 border-top: 1px solid #665;
 }
 
 #navcenter ul li { 
 display: inline; 
 }
 
 #navcenter ul li a {
 text-decoration: none;
 padding: .2em 1em; 
 color: #000000;
 }
 
 #navcenter ul li a:hover {
 color: #891C22;
 }
 
 #navcenter ul li a#current {
 color: #891C22;
 }
 
 /* --- end center navigation --- */
 
 /* --- left navigation --- */
 
 #left {
 width: 185px;
 float: left;
 }
 
 .payment_pics{
 float: left;
 width: 90px;
 margin-top: 10px;
 margin-left: 31px;
 }
 
 #navcontainer {
 width: 190px; 
 position: relative;
 }
 
 #navcontainer ul {
 margin: 0;
 padding-top: 15px;
 list-style-type: none;
 font: bold 12px/19px Verdana, Arial, Helvetica, sans-serif;
 text-indent: 30px;
 letter-spacing: 1px;
 position: relative;
 }
 
 #navcontainer a {
 display: block;
 width: 190px;
 height: 10px;
 }
 
 #navcontainer a:link, #navcontainer a:visited {
 background: url(/images/navbutton.gif);
 color: #000000;
 text-decoration: none;
 }
 #navcontainer a:hover {
 background: url(/images/navbutton_over.gif);
 color: #A5003B;
 text-decoration: none;
 }
 
 #navcontainer li a#current {
 background: url(/images/navbutton_over.gif);
 color: #A5003B;
 text-decoration: none;
 }
 
 /* --- end left navigation --- */
 [/CODE]

@ray326Feb 06.2005 — #Looking at it only in FF:

In your #navcontainer ul change the padding to

padding: 15px 0 0 0;

Take the height off your #navcontainer a.

Remove width from #left.

Add #fff to your body background (assuming you expect it to be white).

That looks in FF like it does in IE but I couldn't take it back to IE to see the effect there.

@Css_CalavauthorFeb 07.2005 — #thanx ray326!

thats a big help will try it out when i get home..

why change the padding from

padding-top: 15px;

to:

padding: 15px 0 0 0;

can you explain why and how that makes a difference.. thanx!

one more thing...does the box model hack need to be applied anywhere at all?

thanx for your help

@Css_CalavauthorFeb 07.2005 — #just done the changes mentioned and looks great in FF now.

how did you know that those spefic css lines needed to be changed? thats what is stumping me.

now for the rest of the site...

@ray326Feb 07.2005 — #I used FF with the CSS editor in the Web Developer extension to look over the css and fiddle the stuff I thought applied. Some folks here pitch rocks at me for doing that but I prefer the empirical to the theoretical. Add that extension to your FF; you won't believe you ever lived without it.

@Css_CalavauthorFeb 07.2005 — #thanx ray326!

ill have a look and try it out.

can you please explain this a little more?

I used FF with the CSS editor in the Web Developer extension [/QUOTE]

and this?

Add that extension to your FF; [/QUOTE]

thanx alot for your help!

@toicontienFeb 07.2005 — #FF is just short of the Web browser Firefox - http://www.mozilla.org - Download it and install it with the Web Dev extensions (via the advanced or custom install). I have the same and don't want to design without it.

@Css_CalavauthorFeb 07.2005 — #thanx toicontien..

i have FF, but i did not know about the advanced options. i will reinstall tonight and turn the "Web Dev extensions" on and have a bit of a play.

@ray326Feb 08.2005 — #The Web Developer extension is in addition to the development tools option in the install. What you get extra in the install is the Javascript console and debugger and the DOM inspector.

@Css_CalavauthorFeb 08.2005 — #ok i have got the extra features now in FF. but how do i use them to help me with my webpage building?

for example how you used it to help me fix my nav's etc

thanx ray

@ray326Feb 08.2005 — #I opened your page, maximized the browser and did a CSS/Edit CSS from the Web Developer toolbar.

@Css_CalavauthorFeb 08.2005 — #thanx ray326

before i do that i have to download all the extentions right?

@Css_CalavauthorFeb 09.2005 — #Ray,

what extensions should i get (or have you got) to help me with what we have been fixing.

thanx

https://update.mozilla.org/extensions/showlist.php?application=firefox&version=1.0&os=Windows&category=Developer%20Tools

@ray326Feb 09.2005 — #Web Developer

https://update.mozilla.org/extensions/moreinfo.php?application=firefox&version=1.0&os=Windows&category=Developer%20Tools&numpg=10&id=60

I also use ieview

https://update.mozilla.org/extensions/moreinfo.php?id=35&os=Windows&application=firefox&version=1.0&go=Go

and LiveHTTPHeaders

http://livehttpheaders.mozdev.org/

@Css_CalavauthorFeb 10.2005 — #hi ray,

i have got the toolbar loaded etc now.

so i opened my page up, and did edit/edit css like you said and it doesnt show me anything i didnt know before.

how do i use this properly to debug my css so i can view it good in FF?

would i use outline>block level attributes? to view where my css is going wrong in FF?

any help from you or anyone would be awsome!

thanx

@ray326Feb 10.2005 — #When I do a CSS/Edit CSS it opens a sidebar with the stylesheet in it. Changes made to that stylesheet are reflected in real time on the page in the right-hand window. Knowing where to look comes with experience but I use the outline tools and information/display id & class details to mine the page.

To disable stuff in the editor I just prepend an x to the names.

@Css_CalavauthorFeb 10.2005 — #thanx ray,

i see how it works now.

just so i dont go round in circles when i am debuging, where do i need to use the box hack?

is it on div's? floating div's?

i havent come to graspes with this yet, and i heard this is one of the most commonly used one!

also, can you please explain how would i apply it, maybe with a example?

the examples i have read on postioniseveything.com dont help ME much as im not that experienced yet.

thanx!

@ray326Feb 10.2005 — #I'm no good at the hacks/filters. I try to avoid the situations where they might apply.

@Css_CalavauthorFeb 10.2005 — #cool thanx ray will have a play with the editor with your tips!

Also in #CSS _↴

CSS Transparency Upgrading from Tables to CSS [RESOLVED] one CSS dropdown menu with two lists side by side?

Success!

Help @Css_Calav spread the word by sharing this article on Twitter...

Tweet This

display’s all out in mozilla

28 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

display’s all out in mozilla

28 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

28 Comments(s) _↴

Also in #CSS _↴