The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Problem with site on IE
thenoesis
post May 25 2011, 04:51 AM
Post #1


Newbie
*

Group: Members
Posts: 15
Joined: 14-May 11
Member No.: 14,549



So I am trying to make my website compatible across a multiple of web browsers and I am stuck trying to get my site work in IE. Here is my site http://www.fragmentedmemories.net/

If you have, say, Firefox and IE, on Firefox it looks like this: http://img541.imageshack.us/img541/1410/picture2acs.png

But in IE it looks like this: http://img844.imageshack.us/img844/5476/eduph.png (I fixed the center problem, but my problem is the navigation on top)

How do I fix this? here is my CSS for the navigation. In IE it streches the page where in firefox, chrome, opera it doesn't

css:
CODE
.header {clear: both; top: 0px; margin: 0 auto; position: absolute; text-align: right; padding-top: 17px; letter-spacing: 3px; width: 1000px;}

.body {clear: both; margin: 0 auto; text-align: left; width: 1000px;}

header{
-webkit-box-sizing: border-box; height: 52px; width: 100%; padding: 0px 5px 0px 0px;
-moz-box-sizing: border-box; height: 52px; width: 100%; padding: 0px 5px 0px 0pxx;
box-sizing: border-box; height: 52px; width: 100%; padding: 0px 0px 5px 0px;
}



html:
CODE

<header class="body">
<a href="http://www.fragmentedmemories.net"><img src="http://www.fragmentedmemories.net/images/logo.png"></a>
<div class="header">
<a href="http://www.fragmentedmemories.net/" alt="home">HOME</a>&nbsp; &nbsp; &nbsp; &nbsp;  
<a href="http://www.fragmentedmemories.net/forums/" alt="forums">FORUMS</a>&nbsp; &nbsp; &nbsp;
<a href="http://www.fragmentedmemories.net/?page_id=27" alt="staff">STAFF</a>&nbsp; &nbsp; &nbsp;
<a href="http://www.fragmentedmemories.net/?page_id=2" alt="about">ABOUT</a>&nbsp; &nbsp; &nbsp;
</div>
</header>


Also the slideshow div is off aligned and would like to fix that.

html:
CODE
<aside class="body">
<center>
<div id="fadeshow1"></div>
</center>
</aside>


css:
CODE
aside{
position: relative;
-webkit-box-sizing: border-box; height: 418px; width: 100%;  padding-top: 0px;
-moz-box-sizing: border-box; height: 418px; width: 100%; padding-top: 0px;
box-sizing: border-box; height: 418px; width: 100%; padding-top: 0px;
}

.body {clear: both; margin: 0 auto; text-align: left; width: 1000px;}


This post has been edited by thenoesis: May 25 2011, 05:04 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 25 2011, 08:55 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Is the problem that the menu is too far to the right?

FYI I use K-Meleon, a gecko browser that is a couple of gecko versions behind FF. In that browser the big image animation is down in the black area.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
thenoesis
post May 25 2011, 09:29 AM
Post #3


Newbie
*

Group: Members
Posts: 15
Joined: 14-May 11
Member No.: 14,549



The whole layout is at 1000px but the top navigation breaks that. I noticed in IE if I dont give the div header a width the navigation is side by side with the image logo. In Chrome/Firefox/Safari/Opera the navigation DIV overlaps the image logo. So I think that is my problem right there.

Do you have a solution to fix the problem with the slideshow being on the black part of layout on your browser?

This post has been edited by thenoesis: May 25 2011, 09:41 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post May 25 2011, 10:45 AM
Post #4


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



Your broken doctype declaration throws browsers into quirks mode:
http://hsivonen.iki.fi/doctype/

The doctype should be the first thing in the document. The <html> tag should come after that.

When you fix that, the markup errors reported by our online validator will be more meaningful. Right now, they contain a lot of noise that is triggered by the doctype problem:
http://htmlhelp.com/cgi-bin/validate.cgi?u...mp;warnings=yes

The W3C CSS Validation Service reports CSS errors:
http://jigsaw.w3.org/css-validator/validat...ng=&lang=en

The first thing I notice is the large blank space at the top of the page, because your Flash animation doesn't display until I whitelist your site.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
thenoesis
post May 25 2011, 12:33 PM
Post #5


Newbie
*

Group: Members
Posts: 15
Joined: 14-May 11
Member No.: 14,549



Ok I added <!DOCTYPE html> before the <html> tag and this should help?

What is whitelist? The slideshow uses Javascript so I don't know if that makes a difference or now.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post May 25 2011, 05:43 PM
Post #6


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



QUOTE
Ok I added <!DOCTYPE html> before the <html> tag and this should help?
Yes. It will trigger standards mode instead of quirks mode, and it will allow you to use the validator to find markup errors more easily.

QUOTE
What is whitelist? The slideshow uses Javascript so I don't know if that makes a difference or now.
A whitelist is a list of sites, users, or whatever that have permission to do something. The opposite is a blacklist, which is a list of sites, users, or whatever that do not have permission to do something.

In this case, I use the NoScript plugin for Firefox. Only sites with permission can use JavaScript, Flash, etc.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post May 25 2011, 05:47 PM
Post #7


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



BTW, here is the link to the W3C's validation report:
http://validator.w3.org/check?uri=http%3A%...ine&group=0

(Our online validator doesn't understand HTML 5 yet.)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
thenoesis
post May 25 2011, 09:23 PM
Post #8


Newbie
*

Group: Members
Posts: 15
Joined: 14-May 11
Member No.: 14,549



Thanks I made changes too the site as much as I could becasue a lot of the errors are Wordpress errors and I am not completely sure how to edit those.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
thenoesis
post May 26 2011, 02:11 AM
Post #9


Newbie
*

Group: Members
Posts: 15
Joined: 14-May 11
Member No.: 14,549



Is the slideshow still on the back part of the site on K-Meleon? I use mac and that browser isn't compatible with iOS.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 26 2011, 07:50 AM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Yup. There's nothing on the gray background. It looks like everything has been pushed down. The logo and top menu are still where they should. Could be a float drop.

K-Mel uses the same rendering engine as FF, so a little older FF should show the same problem. It's just that I like K-Mel's chrome and features better. HTML-wise there is no difference between it and FF if they use the same gecko version.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
thenoesis
post May 26 2011, 01:09 PM
Post #11


Newbie
*

Group: Members
Posts: 15
Joined: 14-May 11
Member No.: 14,549



I downloaded an old version of firefox and I see it now. I don't understand why it is like that. The <aside> code doesn't have a float property in it so I am really lost and confused right now.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 26 2011, 05:31 PM
Post #12


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Maybe gecko didn't grok ASIDE until recently. When I replace it with a DIV things seem to work.

I put borders on ASIDE and #fadeshow1, and #fadeshow1 clearly shows up below ASIDE. I tried to make ASIDE explicitly block, but that didn't help.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
thenoesis
post May 26 2011, 06:00 PM
Post #13


Newbie
*

Group: Members
Posts: 15
Joined: 14-May 11
Member No.: 14,549



so would replacing my <aside> with a div be better? Because I've noticed all the blog directories I've submitted when it takes a screenshot the slideshow is pushed down into the black part of the layout.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post May 26 2011, 06:21 PM
Post #14


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



HTML 5 is still pretty new. It's still just a working draft. The latest browser versions are starting to support the new markup in HTML 5, but not everyone upgrades to the latest browser versions immediately.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
thenoesis
post May 26 2011, 08:18 PM
Post #15


Newbie
*

Group: Members
Posts: 15
Joined: 14-May 11
Member No.: 14,549



Yeah your right. I replaced the <aside> and <footer> with <div>

I have script that was suppose to degrade the html5/css2 script for older browser but I guess it didn't work for some.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 26 2011, 10:12 PM
Post #16


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Seems like the right thing to do. I'm not too well read up neither on HTML5 or browser support for it, but as with everything new, if there is no special reason you need it, the old and save stuff may be a better choice. After all HTML5 is still a working draft, not a spec, and apart from older browsesr there are also special applications to consider, like screen readers, search engines and the blog directory gizmos you mentioned. Seems a bother to keep track of what everything supports or not at this stage.

I guess we need to ease it in a little at the time as we did with CSS and start with the safe or at least not harmful stuff.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 09:53 AM