|
|||||||||
|
|||||||||
|
|||||||||
| |
|||
 |
|
|
|
|
|||||||||
|
|||||||||
|
|||||||||
| |
|||
|
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Display Modes |
Dev Articles Community Forums Sponsor:
|
|
Free Web 2.0 Code Generator! Generate data entry and reporting .NET Web apps in minutes. Quickly create visually stunning, feature-rich apps that are easy to customize and ready to deploy. Download Now!
|
|
#1
March 4th, 2004, 02:39 AM
|
|||
|
|||
|
CSS differences in IE 6.0 and Netscape 7.1
Hi all,
I didn't know where to post this question, so please let me know if there is a better forum for this question. I have created a website with CSS and it looks great in Internet Explorer 6.0, but Netscape 7.1 mangles it. Specifically, buttons that I have created within a table are not being displayed correctly if they are wrapped in <div class="..." > tags. If you want to see what I mean, just go to: http://www.denvermineralshow.com Any ideas of what I can do to make it look good in both major web browsers? bobert
|
|
#2
March 4th, 2004, 07:46 AM
|
||||
|
||||
|
What's the class definition for "button" look like? The buttons look bad in Mozilla too (I believe Mozilla and NS 7 use roughly the same engine), which is I'm pretty sure standards-compliant. I find it easier to build sites that look good in Mozilla and then to go back and fix what MSIE (non-standards compliant) breaks.
__________________
Please don't PM me asking for solutions outside the scope of a thread. Keeping all responses in a thread stands to help others who come along later, which is after all what this forum's all about.
|
|
#3
March 4th, 2004, 09:18 AM
|
||||
|
||||
|
I'll have to look into it further a little later (i'm rushed for time right now)... but it may help to notice that Firefox mangles your buttons, whereas Opera displays the page properly...
I'll look at your actual code a little later and perhaps we can track down the problem...
|
|
#4
March 4th, 2004, 04:43 PM
|
||||
|
||||
|
Wrap your actual left menu in a DIV - get rid of the class on the cell. If you can, get rid of that table altogether.
Then, create a rule like this: (called a Descendant selector) Code:
.leftMenu a {
background-image: url('menu_left.gif');
width: 165px; /* you left of the unit of measurement */
background-color: white;
background-repeat: no-repeat;
/* you may also like to specify width here */
}
Also - go and validate your site here: http://validator.w3.org/check?uri=h...alshow.com%2 F That will ensure your site follows the standards laid out by W3C, and will usually make your site look more consistent across many browsers... no guarantees though. 
|
|
#5
March 5th, 2004, 12:45 PM
|
|||
|
|||
|
Quote:
Hi Stumpy, Do you mean a <div class="menuLeft"> before the <td width=165 height=465 align=left valign=top> line and then removing the class from each cell (button)? I tried that (and created the .menuLeft rule in the .css file) but it didn't help the problem and now the background image doesn't display. Obviously, I don't know exactly what you are thinking. ;-) And, I don't know how to do it without a table, so I'm thinking of keeping the table for now and may remove it when I have lots of time later. Stumpy and dhouston, Thanks for the info regarding Mozilla being compliant and IE isn't. I always thought it was the opposite. :-) dhouston, The button links that don't work look like this in the .css file: Code:
a.button:link {background-image: url('button_n.gif'); width: 149px; height: 35px; margin-left: 10px; background-repeat: no-repeat; font: bold 12pt Verdana, sans-serif; color: #069885; text-align: center; padding-top: 4px; text-decoration: none;}
a.button:visited {background-image: url('button_n.gif'); width: 149px; height: 35px; margin-left: 10px; background-repeat: no-repeat; font: bold 12pt Verdana, sans-serif; color: #069885; text-align: center; padding-top: 4px; text-decoration: none;}
a.button:hover {background-image: url('button_n.gif'); width: 149px; height: 35px; margin-left: 10px; background-repeat: no-repeat; font: bold 12pt Verdana, sans-serif; color: yellow; text-align: center; padding-top: 4px; text-decoration: none;}
Thanks, Bob
|
|
#6
March 5th, 2004, 05:11 PM
|
||||
|
||||
|
Did you validate your site? Do that first. When you create the menuLeft rule in your CSS, you need to ensure it looks like this (by the way, I've changed the menuLeft to an ID, rather than a class, in the following code): "#menuLeft a" - notice the space, then "a" - this means that any <a>'s inside a menuLeft rule, will be styled accordingly.
Yes, the DIV tag goes in between the td's. E.g. Code:
<td>
<div id="menuLeft">
<a href="test.grm">Foo</a>
</div>
</td>
|
|
#7
March 5th, 2004, 11:42 PM
|
||||
|
||||
|
Quote:
Hi Stumpy, Yes, I've validated the site. There are a bunch of errors, but most of them are because of a Mapquest link. Quote:
Thanks for the added details and the website URL. With your help, I now have it looking great in both IE and Netscape. There is only one problem left, but it is not related to what we were talking about above. Well, it's a CSS problem with my footer, so yes, it is a little bit related. I have tried to fix it myself, but haven't been able to figure it out yet. If I can't fix it tomorrow, I'll be back! :-) Thanks, Bobert
|
|
#8
March 6th, 2004, 12:43 AM
|
||||
|
||||
|
You're pretty close to having a validated site - you just need to fix two things.
1) Remove the leftMenu ID attribute from the TD - you only need the one. You can only have one rule defined in your markup if using an ID, rather than a class. 2) re: the map quest link - just replace any "&"'s in the link, with "&", and you'll be sorted! For more info on that issue, and why they need to be & have a read of this thread: http://forums.devarticles.com/t6941/s.html
|
|
#9
March 6th, 2004, 02:54 PM
|
||||
|
||||
|
Quote:
If I remove that ID from the TD, the gray graphic on the left edge of the website gets cut off after the last button. So maybe I need to create a regular class instead of an ID for that? Quote:
Done! :-) I haven't been able to get the footer (770px wide) to work correctly. It looks good in IE, but not Netscape. I would like either 2 or 3 text strings to appear in the footer area, such as: Code:
Text 1 is long and left-justified. Text 2 is shorter and somewhere in the middle. Text 3 is short and right-justified. But Netscape won't right-justify Text 3 to the right side of the page. Netscape doesn't like the widths that I have told it to use. (Maybe I'm using the wrong attribute?) The gray footer needs to extend all the way to the black vertical line, but Netscape is making the gray area only as long as the text. The index.htm page will have 3 text strings; all other pages have 2, so I was just going to make the Text 2 part an empty string for those. Any ideas? Thanks. Bobert
|
|
#10
March 6th, 2004, 05:59 PM
|
|||
|
|||
|
Hi Stumpy,
I made it look better (the gray footer is now the correct width), but the text is still not where I want it. :-( Any help would be appreciated. Thanks, Bobert
|
|
#11
March 6th, 2004, 06:07 PM
|
||||
|
||||
|
OK - remove the <div id="leftMenu"> tag - since you've got the ID on the TD.... it just means you are relying on the table to structure your site, which isn't desirable.
It's also possible to minimise your leftMenu a code by placing the "background-image: url('button_n.gif');" item into the actual "leftMenu a" rule... saves repeating it for all the "a" pseudo classes. As for your footer - in order to do right alignment on the one line (without using tables of course) you need to use the "float" attribute. It's a bit tricky to understand when starting out - but once you master it, there's not much you can't do. So, here's what I porpose for your footer Code:
/******** HTML ******/
<div id="footer">
<div id="footerLeft">left menu content here</div>
<div id="footerMid">center content here</div>
<div id="footerRight">right column here</div>
<br style="clear:both;" />
</div>
/******** CSS *******/
#footer { font-family : whatever; do all footer styling here}
#footer footerLeft { float:left; width:must be defined;}
#footer footerMid { float:left; margin-left: 40px; width:must be defined;}
#footer footerLeft { float:right; width:must be defined;}
|
|
#12
March 6th, 2004, 06:11 PM
|
||||
|
||||
|
Also - have a read of this article - http://www.alistapart.com/articles/doctype
You should starting using a proper doctype, as it will allow your site to look consistent across most browsers, i.e. mozilla, firefox, netscape, IE6, opera (IE5/5.5 are stuck in the dark ages, and can't be helped).
|
|
#13
March 6th, 2004, 08:16 PM
|
||||
|
||||
|
Quote:
Thanks, I'll do these. Quote:
I used your code and modified it with my settings, but now the three text strings are all on separate lines. :-( I tried using the "display: inline;" attribute but then the background color changed to white, so I couldn't see anything except for a date that I have in light-blue color. I have the latest code up on the website, so you can check it out if you need to. Hmmmm.... I'll also check out that article that you mentioned. Thanks for helping, stumpy! Bobert
|
|
#14
March 7th, 2004, 01:23 AM
|
||||
|
||||
|
Sorry - my bad - I made a few errors in the CSS - I guess it pays to test the code first... so here's a tested version I knocked up myself:
Code:
<style type="text/css">
#footer {font-family: Tahoma, Arial, sans-serif; font-size: 11px; width: 760px; color: #ffffff; background-color: #858592; padding: 5px;}
#footer #footerLeft {float: left; }
#footer #footerMid {float: left; margin-left:20px; }
#footer #footerRight {float: right; text-align:right;}
</style>
<div id="footer">
<div id="footerLeft">© 2004 Greater Denver Area Gem & Mineral Council. All rights reserved.</div>
<div id="footerMid">Last Updated: <font color="#aaccff">March 5, 2004</font></div>
<div id="footerRight">On the Web since 2000</div>
<br style="clear:both;" />
</div>
|
|
#15
March 7th, 2004, 06:47 PM
|
|||
|
|||
|
We are almost there! :-) But now the gray footer is 10px too short on the right side in IE. Setting the width to 770px is good on IE, but then Netscape looks bad. I tried to experiment with the "padding" and "margin" attributes, but I haven't figured it out. Is there any way to get both too look similar?
 Also, I looked at that DOCTYPE article and it was a good start, but it didn't explain when to use one versus using another one. Thanks for the help, stumpy! Bob
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
