Please help, IE is killing my design! :(

Hi guys,

Ive been trying some really basic CSS design, but what works in firefox and puts a smile on my face, gets completely ruined by IE. Can anyone advise me on why this is happening and perhaps how to correct it? At this rate, Im going to be sticking to tables!

URL is: alexminchin(dot)(co)(dot)(uk)

Thanks,
Alex

 

There's an endless amount of issues web designers face when creating website layouts. Some of those issues are caused, because some browsers are standards compliant and other are not. I think that is your case. However, there's a solution for most problems.

You need to be specific to get help. I don't know what is wrong with your website. You need to tell us.

 

CaveBoss hit it: state specifically what it is that the page is doing, and with which browser—"IE" isn't enough; 6 & 7 have different issues.

Run your page through the W3 validator. You have errors. This is one that could cause problems:

<meta name="keywords" content="Alex Minchin, Alex Minchin Design, Young Designer Portfolio, Chester University Design"

Code (markup):

You failed to close the tag.

cheers,

gary

 

Ok i just Check your Coding there is some problem in your CSS and HTML. I write for u a coding u can check this http://www.ariyes.net/temp/Alax/index.htm

Or u can download the files form here http://www.myuploader.net//files/1/Alax.zip

Hope its help u.

Thanks

 

Alex-- I really like that design! It looks neat.

The key to working CSS cross-browser is dependent partially on how good the HTML is, as others have said. For instance, besides the unclosed meta tag (which isn't affecting your design) you have a div nested in an h1, etc.

Go ahead and make your doctype Strict. If you're going to make a web page, just do it right. Transitional will let you use deprecated elements which you should be avoiding anyway-- so give the validator the power to point them out to you.

Even though the page is a sort of "advertisement" for your graphics/abilities, don't fall into the trap of having text locked into images. For every image with text in it, you need some real text somewhere-- for teh googlies, for text browsers, for the blind (not sure how many blind people would be visiting your site, but still, it's the principle).

Try a rewrite of the HTML and come back-- we can help you from there.

 

Thankyou all so much for your input into helping me solve this problem I'm going to be trying a few things this morning based on your replies to see if I can figure out a little more on how this cross-browser stuff works! I will post an update later on when hopefully I can start to see some progress being made.

As for more information, I do apologise for the lack of it! The version I have been testing on is IE7

Also, thankyou to Ariyes for the code you wrote me - Im definitely going to use this as a guide if I can't find a solution myself

Anyway, I will keep you all updated with how my day goes!

 

While IE7 is better than IE6, it's another trap to test in only one browser, ESP IE. IE is even less standards-compliant than FF, Opera, Safari, Konqueror-- in other words, the rest of the world.

Download Opera browser, and Safari-for-Windows (assuming you have a PC). Test every change you make in FF, Safari, Opera, IE7 and 6 if you can get it (virtualpc for Vista, Tredosoft Multiple IE's if you still have XP).

 

Ok, I have managed to correctly validate the HTML and the CSS So now onto the bigger task of setting things right for the other browsers i guess!

Stomme - I have downloaded the other browsers as you suggested and am ready to fix this problem with the text shooting up to the top of the screen! Is my next step to start getting to grips with positioning in CSS? I'm wondering if there is a particular technique that works for you guys, that you might use each time you make a site?

 

Firefox and Safari are my new favourite browsers! haha - they are pretty much how I wanted my site to start looking!

IE6 and IE7 are causing the worst problems (the elements with text all seem to rise to the top of the page)
Opera is all almost ok, except for the left menu rising up to the top

 

More progress, I found that by using fixed position, I had more control over the layout on the page, making it work in all of the browsers, except IE6. I'm not sure why this is happening? My code for the three elements is the following:

#top_details {
  position : absolute;
  left : 570px;
  top : 45px;
  width : 140px;
  z-index : 3;
  color : #000000;
  padding : 0;
  border: none;
  
}

#leftmenu {
  position : fixed;
  left : 0;
  top: 160px;
  width : 150px;
  margin-left : 10px;
  border: none;
  color : #000000;
  padding : 0px;
}

#body {
  position: fixed;
  left: auto;
  top: 150px;
  margin : 0px 300px 0 165px;
  padding : 2px;
  vertical-align: top;
  color : #000000;
  width: 540px;
  text-align: justify;
} 

Code (markup):

 

Position: fixed is NOT a good idea : ) When your page gets longer, nobody will be able to scroll down. It's only used in very special circumstances, and as you've noticed, IE6 doesn't support it at all (treats it like position: absolute).

Here's prolly how I'd think of your page: http://stommepoes.nl/alex.gif

boxes being divs or some other element.

Let's go through your HTML. This will help your CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Code (markup):

Go ahead and make that strict. It's not harder-- it's easier, because then the validator can tell you when you're using a deprecated element or attribute.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="A little piece of me, by young designer Alex Minchin." />
<meta name="keywords" content="Alex Minchin, Alex Minchin Design, Young Designer Portfolio, Chester University Design" />
<title>A little piece of Me</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

Code (markup):

Ok.

<div id="top_details">
	<p class="top" align="right"><a href="../contact.html" class="t_link">Contact Me</a><br /></p>
    <p align="right">Available for Hire</p>

</div>

Code (markup):

Here, you're using deprecated (left behind in exchange for greener pastures) attributes, align. You're also sticking a line break inside a P. Since a P is a block element, that means it makes a new line automatically. Although to tell the truth, I'd probably make this a single P with an id or something called "contact", set a width on it (because like other block elements, it is naturally 100% width of its parent, who in this case is the <"top-details">) and float it right. That's what align got traded for-- floats. To keep this newly floated P from hugging the right or top sides too tightly, you can use margin-top and margin-right to push it away from those corners (actually, the corners of the "top-details" box, which is also naturally 100% wide). Since you have your name and some numbers on the left, I'd assume you expect people to read it. So, keep the image, but you could have that image sitting over normal text, so even those people who've turned images off to surf faster, or the blind, or whoever, googlies, have some text to read. It's a bit tricky when you're first starting out, though, so maybe for now we'll leave it. But the rule is, don't lock information in images.

<div id="leftmenu">
	    <p align="left"><b><u>Projects</u></b><br />
	    &nbsp;<br />
        Test One<br />
        Test Two  </p>
</div>

Code (markup):

You've called this box "leftmenu". And it has a menu in it. A menu is considered a list of links, so we actually use a list (this makes more code compared to the old span/anchor method, but is more semantic in that we're using HTML tags that actually refer to what the content is...) so, let's do this:

<div id="leftmenu">
  <h2>Projects</h2>
  <ul>
    <li><a href="#">Test One</a></li>
    <li><a href="#">Test Two</a></li>
  </ul>
</div>

Code (markup):

Since I assume these will be clickable, I've made them anchors (but empty for now). I realised that "Projects" was intended as a header for the "Tests" so I set it in an h2. The h1-h6 headers are great for teh googlies and for screen readers. Practically, they keep your code clean and clearly mark out who's a header of what text or section of the page. Like in a newspaper. I used h2 because I expect the Wlecome My Name Is Alex part of the page to be the most important header, so that'll be the h1. You only get a single h1 per page, so make sure it's the name of that particular page (not the name of the website). H2 is like next down in importance... it could have been an h3 too but there's too little content here yet to tell what the best header is.
The ul sets the list, the li's are the list items. List items can hold all sorts of stuff in them, in this case anchors, but ul can only hold li's, so I couldn't put the h2 inside it.
Try to avoid using &nbsp in your code. First, we're pretending this is XHTML (more on that later) and real XML doesn't have &nbsp. It only has 5 of those sorts of "character entities", and one of those XML character entities isn't compatible with real HTML, so that leaves you 4 : ) Since we're going to mark everything up as IF it were ever going to be parsed by an XML parser, we'll avoid those character entities. Instead, if we need a special character, we'll use the hex values (you can get the list from Wikipedia just use the numbers in the Unicode column in ()'s by adding a &# in front of it: &# 160; without the space.
although we're never going to use nonbreaking space in our code in any form : )

<div id="body">
  <p>Welcome to a little piece of me...</p>

Code (markup):

It's okay to name this part "body" but it can be a source of accidents in your CSS since you also have an element called "body"... I prefer to use something like "main but whatever... personal choice.
The P might be our h1 here.

  <p>My name is Alex Minchin and I am a young designer, currently about to embark on my third year studying BA Graphic Design at Chester University, England. This website is the beginnings of a collection of my work that I hope you will take the time to look at, and hopefully enjoy it in the process :)</p>
  <p>Alex</p>
</div>

Code (markup):

Since you've set this up to kinda read like a letter in the way that your name's at the bottom, we could possibly hold everything in a single P and use a br to force a new line.
Generally, you would use CSS instead of br but there is a place for br: when the line-break is part of the content. Since the newline here for your name is following standard letter styles and the name floating around by itself wouldn't mean anything, it might be appropriate to use br here. Because we're pretending to write XHTML, it's going to be <br />.

Another instance where breaks in the actual code are considered "part of the content":
<address>
Foo Man Choo<br>
Long Road 5<br>
1337 FF Foocity<br>
Foo Land
</address>

Yes, I use <address> for actual addresses. It was meant for something else, but I recall there used to be a <menu> tag in HTML too... anyway, here the breaks have meaning and aren't just styling-- they are following address-writing protocol.

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-573350-19");
pageTracker._trackPageview();
</script>

</body>
</html>

Code (markup):

I would leave out scripts while you're working on a page. It's not like they hurt anything, but it's extra stuff in your page while you're working on it. If this were my page, I'd add it in after I had everything working right.

XHTML: because you have to send this "XHTML" as content-type: text/html, your code is reall HTML. It's being interpreted as HTML by browsers. XHTML is supposedly allowed to be sent both ways, but really, when you set your content-type to html then it IS html. If you were writing real XHTML (like 1.1) you'd be sending it as "application: xml+xhtml" but there's a good reason not to: IE ignores it and barfs. Yeah, Microsoft was all like, we'll support this "extendable" html, and then turned around and didn't. So even though other browsers can deal with it, your greatest viewing population can't. So it's okay to write with "XHTML" but remember that it's not, in this case.

Even so, if I ever bother to write "XHTML" then I pretend it'll really be parsed by an XML parser, and I do some things that the validator won't say "boo" about just to do it the right way.

Not that you won't see plenty of bad XHTML pages out there, but you've got the opportunity to learn it the right way : )

I keep getting logged out and it's difficult to log in, so I'll have to wait on teh CSS. But stay away from position: fixed and try to avoid position: relative or position: absolute!! They seem to give you pixel perfect control, but what they do is turn your flexible bamboo into a breakable brittle stick! The web isn't print-- your page will need to grow and flex with different text sizes and browser sizes and screen resolutions, because that's what visitors will do to your page. You may already know this as a Design student, unless you're studying print. In which case, forget lots of what you're taught about design-- print is a different medium and web pages follow different rules!

 

Wow, thanks so much for that reply Stomme! Ive Repped you for the help your giving me on this In response to your post, I have responded to each part as you've structured it.. hope it makes sense in relation to what you've said!

Firstly, the image you have made is pretty much spot on - the project pages will have a title, a little description (where the main text is now i guess) and then images underneath to demonstrate the work to the viewer.

On to the main post,

#1 - "Go ahead and make that strict." - Im not fully with you on this one, do I need to change that first bit of code to something?

#2- This bit has lost me a bit lol, i understand what you are saying about the deprecated attributes but I am unsure as to how to start going into IDs/floats etc to fix it? I'll have a play around and see if I can achieve it though.

#3- Thanks for the help with the code I'll have to read up on how to style those hideous bullet points, but that can wait till its working cross-browser i guess!

#4- I've changed the 'body' to main as you suggested. I'd rather get bad habits out the way early

#5- I've changed the <p> on that first line to the h1 tag

#6 - Removed Google analytics script for now

If I stay away from those positioning techniques, what do you suggest I use? Everything i'm reading seems to be too technical or giving me different information from what I need for this site to work with those three positioned DIVs

Thanks for all your help by the way, finding it very useful!

 

Very good write up Stomme poes. I would pick two nits, though. Those numeric entities aren't hexadecimal, they're decimal. &#38;nbsp; is decimal 160, and hex a0. &#38;#160; and &#38;#xa0; respectively.

The address element has a specific semantic value; it is the address of the document's author. Not an issue in this case, but poor practice to otherwise use it indiscriminately. There is a standard protocol for marking up general addresses. See microformats. The advantage of the protocol is that the markup is machine readable and can be exported as xml or vcf; the latter can be imported directly into many address books.

@ ASM Design:

#1 Replace transitional with strict in the DTD.

#2 This is about writing valid, well structured and semantic document markup. Layout stuff isn't an issue until you have good markup. The structure should remind you of a freshman Eng. Lit. paper.

#3 … Good.

As Sp said, you'll have to forget/relearn a lot of what you know from print design. In print, you have total control. On the web, you have none. Your best efforts can only be suggestions. The user can and will override everything you do. Learning to cope with the chaos is the downfall of so many formally trained graphic designers.

cheers,

gary

 

In ISO-8859-1 ONLY - which is why I still say since it's SUPPOSED to be a space, it should be decimal 32 / hex 20... Shame about that whole 'non-breaking space' thing. In either case it's why named entities are safer than numerics, since I forget what &#xA0 gives you in UTF-8, but I'm fairly certain it's NOT a space.

 

There is a definite and practical difference between a plain space (dec 32), and a non-breaking space (dec 160). The plain space is a white-space that collapses with other white-space entities, tab, cr, lf, or other spaces, etc., eg.. The non-breaking space is a character entity, and not a white-space. When used to connect words, word&nbsp;word, they now act as a single word and don't break for word wrap. Multiple &nbsp;s do not collapse, nor do they collapse with white-spaces.

The non-breaking space, hair-space, thin-space, en-space, em-space, and maybe another couple I can't recall offhand are all a part of Unicode and utf-8. Not all are necessarily in the glyph set of a given font-face.

cheers,

gary

 

Thankyou for the help guys, but I still have three div boxes that are being messed around in IE My main priority is to get something up and running on the web, displaying work. Some of this stuff is way too technical for me (the stuff about hex/decimal).

I'm not completely new to web design, I have owned websites for the past five years. The problem is, I only know tables which is why I want to use table-less design, but right now it's killing me having something which can be done in ten minutes if i use tables, but has taken me this long to get something nearly working, then get told to rethink my positioning choice!

Please help me set those three div boxes to a place they will stay, in a cross-browser compliant way

 

Making the jump from tables to tableless is a big one - because it requires you to completely forget EVERYTHING you know about design if you learned it prior to four years ago and have been making sites '1998 style'. Every instinct you have from writing HTML is probably wrong when you make that jump.

Hand in hand with moving from tables is semantic markup, which is to say NOTHING in your HTML should say how it appears, instead saying what it IS. Is that contact me link a paragraph? No, it is not... So why are you marking it up as a paragraph... Is that line break because it's an end of thought, or just there for presentation... If it's just there for presentation then it shouldn't be in the markup. You will hear 'separation of presentation from content' mentioned - it is the principle that anything that says how it appears goes in the CSS, anything that says what it is goes in your markup.

Semantics also means your headers should be in the proper order - headers should 'fan out' like the branches of a tree. Only one H1 on a page. If you use lower level headings they should be subsections of that h1. Right now you have a H2 on the page FIRST, followed by a H1 - when both of those really should be siblings as they are subsections of the site itself.

You also have design 'flaws' in that you have no fallback text content for your images. You have your name and contact number as an image - that means people browsing with images off and things like search engines are going to see bupkis. To me, just as the name of the newspaper is in a heading at the top of every page of the paper, that too should be an H1 with text - you want the fancy image over it, use an image replacement technique to place it over it.

You also have font size issues - you are using a fixed metric font in WAY too small a size for your content area. This makes your site effectively useless to 'large font/120dpi' users myself without diving for the zoom to go in 50% or more. Anything smaller than 12px is /FAIL/, I get twitchy below 14px - and really you want smaller than 14px on a content area use a dynamic font like %/em or at LEAST use PT so it obeys the system metric.

In other words, there's a lot to learn, so a minor detail like chosing a positioning model known not to work worth a damn is hardly a suprise. Usually position:fixed is NEVER worth even ATTEMPTING to use because it doesn't work worth ****, and position:absolute should be used sparingly inside containers that are still 'in flow' - that's the biggest thing biting you here is you took your elements out of flow. That's going to break - period.

Stick with us here and learn the above - the net result is cleaner faster code that's easier to maintain and uses less bandwidth. It's a big hurdle, but worth it in the longterm.

What you should be using for those columns are FLOATS... likewise you shouldn't be absolute positioning that data up top either. Most people would say to float that too - me, I'd use a negative margin to ride it back up over the header (which would be a h1)

Lemme show you - gimme a few minutes and I'll toss together a rewrite for you with some documentation.

 

Ok, this is how I would code that:

http://www.cutcodedown.com/for_others/asmDesign/template.html

You'll notice I also centered it on the screen. The directory:
http://www.cutcodedown.com/for_others/asmDesign

is unlocked so you can get at the gooey bits. Valid XHTML 1.0 strict, tested in IE 5.5, 6 & 7, Opera 9.27 and 9.52 beta, FF2 and 3 as well as Safari 3.

To go over it bit by bit:

The first thing in the CSS is a simple reset. Across browsers the default paddings and margins are NOT consistant, so doing this fixes that. The 'simple' version can cause problems with form elements later on, so a more complex reset might be in order.

The body we first set text-align:center - as the comment says this will center #container in IE 5.x. It's one like to support the old girl, why not? Your letter spacing and word spacing were copied over, though you'll see I'm setting a % font for the content. You kept restating the same things over and over - you only need to say it once.

Next the anchors - again you were declaring a bit more than you needed to. You set the common values on A, then in the psuedoclasses (active, focus, hover, visited) you only need to set the things that change.

Sicne we reset all elements, we need to put margins back on the paragraph. I like 1em top and bottom as it's slightly less than the line-height. YMMV.

#container - we set the width equal to your image, we then set a margin to center it, then put text-align back to normal. Ok, so that was two lines for 5.x - again, why not?

H1 - this is a bit complex. First we set position:relative so that we can absolute position the span inside it. If we didn't set position:relative absolute positioning of the span would be based on BODY, not the h1.

IE can get a bit daft about the 'left' setting of absolute positioned items unless we trip 'haslayout', so we use the holly hack 'height:1%' to trip that fixing a minor IE render bug. Since no height is declared on the parent element (#container) that height:1% is treated as if it was height:auto in all browsers, but miraculously still trips haslayout on IE6/earlier.

I add some padding at the top to push the text down, then set a fixed size font. If you add up two of the line-heights (24+24) and the top/bottom padding (+69+24) you get 141 px - same as your header logo.

H1 span - simple absolute position over the text of the h1. This lets us load the image as a background instead of as content being it's a presentational element - and leaves the actual text it represents in place for things like search engines to see.

H2 - just set the font. Quick and easy.

#contactAvailable - this element needs to be 'over' the h1. Easiest way to do this is set position:relative so it will have depth sorting priority, then use a negative margin to 'ride it up'. Because we are again working in a fixed-height area in relation to the image that means we need a fixed size text. Since we only need to ride it up 96px to look good, that's all we do, and then the 48px bottom margin plus two line-heights pushes 'flow' back down to the bottom of the h1. A simple text-align and 200px right margin finishes off positioning it's content. You MAY in some cases end up needing to use floats for the h1 and #contactAvailable if you were to have links on the left - since you did not this should work fine.

#sideBar - This is simple. We float the box left, set a width on it. Because it's a narrow fixed width column, we should restrict it to a fixed size font. 13px is smaller than I'm usually comfortable with, but larger than you had.

#sideBar UL - just some simple margins.

#content - since you only have two columns we don't even need to float this. The 160px left margin makes sure our content does not try to 'wrap' around the float, but will collapse under the sidebar. 200px on the other side matches the 'push in' you had...

Though I'm wondering if you were planning on a third column given the amount of space you are padding - in which case the above all needs to be chucked and reworked.

That's pretty much it. For fun view it with images off and CSS enabled - it shows exactly why I handled the header the way I did. Oh, this is bad, it took me longer to write this post than it did to write the code.

 

Oops. I use hex ASCII values on my email addresses! I think I might have been thinking "hash values" in the back of my mind because instead of &nameofentitie; I have the #hash. Oops again.

He has that because I told him to do that.

I didn't want to jump into the whole negative-margin-sidebar-wrapping thing. The easier method (the one I learned first and think anyone starting out should learn first) is the simple float. Meaning it has to come first in the code. So that sidebar, which should not have the main page header (it's only a subpart of the page) gets the h2 (or h3 if I could tell how important it was) while the "welcome to my site" seemed like the name and title of the page, thus h1. But with simple floats needing to come first in source, the h2 comes before the h1. Other than resorting to the fancy wrapping trick (which is STILL giving me a scrollbar in Safari for Windows!!!), I don't know the way around this. I've had h2's and h3's come before the name of the page (h1) before I learned the wrapping trick.

I think Dan has convinced me not to consider the name of my newpaper the title/h1 but the main story instead (<h1>Mozilla destroys Tokyo</h1>) although I'm still figuring out what to consider the logo/site name because that IS a title of some sort.

I looked at microformats. They are made by bloggers for bloggers. I cannot use any of their "standard" formats-- I have insurance sites and home rental/buying sites that I've made, and not a single "microformat" supports them. I have calendars, and cannot use hCalendar because it's made for bloggers (who have "events" which is required... our houses have available times and prices, but no events). RDFa is currently also useless. I am keeping my eye on them, because I expect the whole metacrap thing to become useful to those other than Facebook Myspace Bloggitty-blog-blog-blog types sometime in the future. But until then, I need a semantic HTML element that means Postal Address.

<postaladdress> doesn't exist. Web author address is completely useless and unneeded in any page I write (again, I'm not a blogger, I don't need a "web author address" just a URL), so until then, I will continue to hijack <address> for addresses. If I could get away with <menu> for menus I'd do it too, but while <menu> is deprecated <address> isn't.

My other choice is a list, and according to Tommy an address isn't a list but simply an association. I can't consider housenumber to be a standalone list item. The address is only useful as a whole.

Lawlz.

 

Thankyou both deathshadow and Stomme poes, i really appreciate the time you are spending to help me learn. I'm slowly absorbing the information and trying to figure out how things work!

deathshadow - The example you coded is almost perfect, and I can see that the code on both so much cleaner and easier to comprehend than the one I've done on dreamweaver! And thankyou also for putting notes throughout to keep me on track as to what part does what! A few questions on some of it though

1. Where the code has multiple values on the single line, for example:

#content {
	margin:0 200px 0 160px;
}

Code (markup):

How do I interpret this? Are the values in order of top, right, left, bottom or something similar? The same question with some of the font values (the 13px/15px):

	font:normal 13px/15px arial,helvetica,sans-serif;

Code (markup):

2 - Could I get away with using smaller text and having a larger option? The reason I say this is because I do agree with you on the basis that certain font sizes should be used. However, with this being my graphic design website, I want to go slightly off best practice, using underlines on work titles, bold highlighted links and having the smaller text (perhaps there is a middle size that may work?).

The website in general is not going to have much wording, around 50 words per page or less with photographs/images of my work being the main focus. I want these images to be the same width as the #content div (I was thinking this to be about 550px wide). I'm guessing that with the current margins, that it is 573px wide (933(container)-360(margins))?

3 - I definitely need to have the site left-aligned as opposed to center (see where the image cuts off on the left (black pen), that simply can't happen on a design website - To do this, I'm guessing I could set a left float on the #container div, and everything would follow suit because of it encompassing all the other elements?

Thanks again for your help with that template, really helpful stuff!