Web Design Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed ForumsWeb DesignWeb Design Help

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old June 2nd, 2004, 10:35 AM
asleepwheel asleepwheel is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Aug 2003
Posts: 10 asleepwheel User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Angry Help! Cross-Browser Layer/CSS positioning Error(s)!

Hi,
I'm looking for some advice on why my design is displaying fine in IE 5+ but not in Netscape/Mozilla/Safari. Here's the URL: http://www.visionfitness.com.

I've designed the page with transparent .gifs that have OnMouseOver and OnMouseOut events to toggle the show/hide visibility of <div> elements. The <div> elements contain navigational elements and links to get around our site. In IE 5+ these elements work as they're supposed too. You'll notice when you view the page with Netscape/Mozilla/Safari that the positioning is all messed up on the <div> elements. I'm using CSS to "absolutely" position these elements.

Frankly, I'm a bit embarrased to have designed a page that views fine in IE (quirky, non-standard CSS support) and will not view in the more standards compliant browsers. I've gotten to the point where I abolutely cannot figure out why this is happening.

Anyone out there have any suggestions?? I've tried to tweak my CSS file and positioning code, but to no avail...

Please help!!!! Thanks!

-Ash

Reply With Quote
  #2  
Old June 2nd, 2004, 12:37 PM
tasos_0100 tasos_0100 is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
 
Join Date: May 2004
Posts: 7 tasos_0100 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
maybe the web browsers version doesn't support it or maybe you have just done some mistakes on the align just check it again also if you are using dreamweaver check the option of the browser
keep working...

Reply With Quote
  #3  
Old June 2nd, 2004, 06:34 PM
newspace newspace is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Jun 2004
Location: old Europe
Posts: 3 newspace User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Send a message via ICQ to newspace
Hi
IE5, IE 6 and mozilla don't show the same. i have the same problem with my div-tags. but first try to valifdate your page with html validator and css validator.
if your page is ok the only help is a browser switch.
here is a page where it is explained:
URL

if you don't understand german, here is the code i use:

<!-- Autor, Entwicklung 2002-2004 Kristof Lipfert Dueseldorf -->

<!--[if IE 6]>
<link type='text/css' rel='stylesheet' href='NBIE6.css'>
<![endif]-->

<!--[if IE 5.5000]>
<link type='text/css' rel='stylesheet' href='NBI55.css'>
<![endif]-->

<!--[if lt IE 5.5]>
<link type='text/css' rel='stylesheet' href='NBIE5.css'>
<![endif]-->

<!--[if !IE]>
-->
<link type="text/css" rel="stylesheet" href="nichtIE.css">
<!--
<![endif]-->

it decides between IE 5, 6 and mozilla.
just give every div-tag an id and define special positions in every css-file.

i hope i could help you
bye

Reply With Quote
  #4  
Old June 4th, 2004, 09:53 AM
asleepwheel asleepwheel is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Aug 2003
Posts: 10 asleepwheel User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Another Interesting Point...

Thanks for the help! I've thought of the different browser specific style sheets - but that doesn't appear to help...

The real issue that I've found is that on certain <div> elements in my code, the CSS styles (contained in an external .CSS file) are not applied by the Mozilla-type browsers. What's really interesting is that if I remove the CSS references to these styles and use a STYLE attribute on the <div> element, Mozilla applies my formatting.

Anyone out there have any idea why this is happening?? It's really frustrating since I want my style/formatting logic seperate from my XHTML code.

Any further help would be greatly appreciated!

Thanks,
Ash


Reply With Quote
  #5  
Old June 7th, 2004, 11:36 AM
asleepwheel asleepwheel is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Aug 2003
Posts: 10 asleepwheel User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Figured it out!

Okay, I figured it out... My CSS was not validating because I hadn't indicated a unit of measure for my positioning values. Because my CSS wasn't valid, the placement of my <div> elements was all messed up.

so this style..

style1 {
position:absolute;
left:431;
top:192;
width:90;
height:65;
}

should be..

style1 {
position:absolute;
left:431px;
top:192px;
width:90px;
height:65px;
}

Once I made this change, my page displayed properly in the Mozilla compatible browsers.

Reply With Quote
Reply

Viewing: Dev Shed ForumsWeb DesignWeb Design Help > Help! Cross-Browser Layer/CSS positioning Error(s)!


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 3 hosted by Hostway