/    Sign up×
Community /Pin to ProfileBookmark

IE layout Problem

Copy linkTweet thisAlerts:
Aug 06.2009

Hi i have a problem with the layout of my website if i load it in Firefox it displays how i want it. If i open the webpage on my local computer it displays how i want it. BUT when i upload it to my server and locate to it with IE it displays diffrently?

Any help please heres the pics:

[URL=”http://shaun.blythnet.co.uk/ielocal.jpg”]Local IE[/URL]

[URL=”http://shaun.blythnet.co.uk/ieserver.jpg”]Server IE[/URL]

(heres my css if its needed)

[CODE]#sddm
{ margin: 0;
padding: 0;
z-index: 30}

#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial}

#but2
{ margin: 0;
padding: 0;
z-index: 30}

#but2 li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial}

#sddm li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 95px;
background: #33CCCC;
color: #000000;
text-align: center;
text-decoration: none;}

#but2 li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 1px;
width: 95px;
background: #CCECFF;
color: #000000;
text-align: center;
text-decoration: none;}

#sddm li a:hover
{ background: #33CCCC}

#but2 li a:hover
{ background: #33CCCC}

#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #5970B2}

#but2 div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #5970B2}

#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #CCECFF;
color: #2875DE;
font: 11px arial}

#but2 div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #CCECFF;
color: #2875DE;
font: 11px arial}

#sddm div a:hover
{ background: #49A3FF;
color: #FFF}

#but2 div a:hover
{ background: #49A3FF;
color: #FFF}[/CODE]

Thanks once again ?

to post a comment
CSS

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@KDLAAug 06.2009 — You might try cleaning out your browser's cache before viewing the server-version. It could be that the browser is using old cache files (css/html/images) to render the page.
Copy linkTweet thisAlerts:
@_quot_YT_quot_authorAug 06.2009 — hi i tryed that but still no joy. its happening on more than one computer. Any other ideas? im not sure if my codes wrong or what? im quite new to this ?

Thanks
Copy linkTweet thisAlerts:
@KDLAAug 06.2009 — I'd make sure that all your files have been uploaded, and into the correct directories. It could be that one of your CSS files has been placed incorrectly or not at all on the server.
Copy linkTweet thisAlerts:
@_quot_YT_quot_authorAug 06.2009 — ok then i will delete all the files and try again when i get home. Like i said in my first post though it works fine in firefox ?
Copy linkTweet thisAlerts:
@KDLAAug 06.2009 — Without access to the code/a link, it's hard to determine the problem. These are just guesses.
Copy linkTweet thisAlerts:
@_quot_YT_quot_authorAug 07.2009 — hi i just uploaded it to a live server and it now seems to be working on my IE but no other computers?

heres a link http://shaun.blythnet.co.uk/klcc/

css files are at http://shaun.blythnet.co.uk/klcc/style.css

and the one for menu is http://shaun.blythnet.co.uk/klcc/css/default.css

Thanks
Copy linkTweet thisAlerts:
@tim_wilson2009Aug 07.2009 — margin: 0;

padding: 0;

you might try making sure you have a measurement value after your numbers - 0px, 1pt, 2em and so on...

I found when dealing with multiple browsers always provide a - px,pt,em,etc
Copy linkTweet thisAlerts:
@KDLAAug 07.2009 — Fixing these errors might be a starting point: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fshaun.blythnet.co.uk%2Fklcc%2F

Also, this might be the problem:
<i>
</i>#sddm div
{ position: absolute;
[B]visibility: hidden;[/B]
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #5970B2}

<i> </i>#but2 div
{ position: absolute;
[B]visibility: hidden;[/B]
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #5970B2}


Something set to "visibility: hidden" affects the spacing, meaning there's a placeholder for it until it is visible. IE tiles positioned elements differently than Firefox, so the stacking order could affect the spacing. You might change this to "display: none;" and amend your javascript:

(excerpt requiring change)
<i>
</i>// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();

<i> </i>// close old layer
<i> </i>if(ddmenuitem) ddmenuitem.style.display = 'none';

<i> </i>// get new layer and show it
<i> </i>ddmenuitem = document.getElementById(id);
<i> </i>ddmenuitem.style.display = 'block';

}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.display = 'none';
}


This will eliminate the "placeholder" altogether.

Or, you could use "left: -999em" (to hide) and "left: auto" (to reveal). It's just dependent upon whether or not you want the menu ADA accessible.

If you're game, you might just want to start over with a more semantic, coder-friendly version of the menu here: http://users.tpg.com.au/j_birch/plugins/superfish/#examples

It's very similar to the one you're using.
×

Success!

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

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...