[Solved] What a mess!

[wowell]

Hi everyone, this is my first post :)

So I’ve just coded a website, and after thinking it was fine after viewing in Safari (which is usually the one that displays the errors for me), after testing it in Firefox and Internet Explorer it’s a complete mess!

the url is http://www.a1kiteboarding.com.au I recommend viewing in Safari first if possible to see how its intended to look

Ok here are my problems, I’ve been working on it all morning and am completely stumped

IE:
– Navigation bar comes up as an [x] and won’t load the image, even at its source (yet it loads in Safari)
– Logo is pushed to the far right, so the user has to scroll.

FF:
– Nav bar doesn’t show at all, I know its there as its adjusting the width of the blue banner, without the nav bar it’s a lot thinner

Also some errors have come up when validating saying I can’t have <br> in <divs> … I’m only a student designer, I’m quite clearly very shocking at it, but I’ve tried using <p> but it just bunches all the text up together (I know logically this is what <br> should do, instead its doing what <p> should do .. go figure)

Anyway if anyone could help me out with these problems, I’d appreciate it so much! It was such a disappointment to discover it didn’t work.

Thanks again!

[TheDoc]

A <br /> is certainly ok, it was probably just telling you to remember to close it with the "/".

You shouldn’t be using a combination of divs and tables. Pick one or the other (and pick divs). If you’re a student designer, you shouldn’t be learning how to use tables at all.

[wowell]

I’ve removed the table from the navigation, but its still not showing up. I’m wondering whether it has something to do with the z-index? there isn’t one set for the navigation, but there is for the div its in.

Sorry I must seem like such a silly student!

[Rob MacKay]

"wowell" wrote:

I’ve removed the table from the navigation, but its still not showing up. I’m wondering whether it has something to do with the z-index? there isn’t one set for the navigation, but there is for the div its in.

Sorry I must seem like such a silly student!

the silly student is the one who is too proud to ask for help ;)

I think you are making things far more difficult for yourself than needed. I see you are using an image map, are you using fireworks?

You are using quite a lot of old-school techniques as well…

First off though you have an extra </div> after the closing navigation div.

Getting into it – I would say you need to go from the beginning – its in a bit of a pickle. This is how I would structure it.

Code:

A1 Kiteboarding School

• About
• Location
• School
• Shop
• links

Now your CSS is something else! I am going to try and give you some pointers as I don’t have time to dig through it all.

Ok you are using positioning, this is GOOOOD :D well done – BUT you let yourself down with some of your padding adventures… -100px on right? whats that all about :D

You rely on z-index farrrr too much. z-index is something that is not really that reliable, I would always recommend using the structure of your document tree before anything like that. What I mean is the further through the HTML you go the higher to the top of the pack something is.

Example:

<div> 1 </div>
<div> 2 </div>
<div> 3 </div>

Now if you absolutely positioned these divs, the div with "3" inside would be on the top. Imagine dealing a pack of cards, the first card you put down is on the bottom of pile, and you add more to the top of it. Its the same within the structure of html.

So only use z-index when you really need to break out of that.

*uses police loud hailer* Put the tables down, turn around slowly and put your hands in the air!

You don’t need tables, the only time you should use tables is when you have some data like a member list or something that needs to be in a table. Not for site structure :)

I hope all that helped sorry I couldn’t go any deeper.

Also If you want to understand Positioning a little better:
http://alteredaspect.info/the-art-of-css-positioning/

</self pimp>

PS. Don’t use "align" in divs or anything else really – you should only be using id and class inside them and then styling it elsewhere. Forms and things like that are the exception.

[wowell]

Wow you people are so nice! I wasn’t expecting this much help! Thankyou so much!

I’m a real test and try designer, most of the things I used I’ve just picked up along the way, and I’m only in my first year of uni so I’m really looking forward to actually getting some proper training rather than what I’ve self taught myself. Thats why you see ridiculous things like -100 paddings (was getting frustrated with it not moving so put a ridiculous number to see what it would do, which was nothing, and forgot to get rid of it) and tables (which we were forced to use in high school, divs were another thing I discovered.

Ok anyway so I think I understand what you mean, and have changed everything to what you said. Hopefully everything is a lot neater and correct now haha. But it still hasn’t resolved the problem of it not working in FF and IE?

//edit: reading your tutorial now, hopefully it will fix the problem

[Rob MacKay]

Let us know how you get on after the tut :D

[wowell]

It didn’t help, I’ve checked everything, tried changing it round and I still can’t get it to show

[Rob MacKay]

Ok well you still have an extra close div after your navigation.

Dont use an <img> for the background image of your site. Coz thats just wrong :) attach it to your HTML tag and give your HTML tag height:100%

try and load just the navigation.png in your browser…

http://www.a1kiteboarding.com.au/images/navigation.png

in FF I get this message…

The image “http://www.a1kiteboarding.com.au/images/navigation.png” cannot be displayed, because it contains errors.

It isnt happy obviously… if I try and download it – getting errors… your image is corrupt

[wowell]

Thankyou so much! It’s all working! I can’t believe all that was over a corrupted file. Strange that the file still loaded in safari though.

I’m in major debt to you guys!

[Author]

Posts