14 replies [Last post]
DarkNSF
DarkNSF's picture
Offline
newbie
Melbourne, FL
Last seen: 13 years 43 weeks ago
Melbourne, FL
Joined: 2008-01-07
Posts: 6
Points: 0

Been stuck on this for 4 hours now. :curse: :curse: :curse: :curse: :curse:

Main Menu is spaced correctly in Moz/Opera, but in IE it is like 25 pixels to high. What a surprise.

EXAMPLE: http://valhalla-studios.com/new/

    <div class='header'>
        <ul class='menu'>
          <li><a href='index.php' rel="nofollow">home</a></li>
          <li><a href='services.php' rel="nofollow">services</a></li>
          <li><a href='portfolio.php' rel="nofollow">portfolio</a></li>
          <li><a href='contact.php' rel="nofollow">contact</a></li>
        </ul>
    </div>

ul.menu
{
  clear: both;
  float: left;
  list-style: none;
  position: relative;
  top: 65px;
}

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Fix up the html validation

Fix up the html validation errors and then the CSS validation errors and if problems still persist come on back. One of our rules around here is that before you ask for assistance your code (html and CSS) should validate against the W3C validators. Without valid code you have no basis to complain on.

I think your design approach is entirely backward and will lead to no end of needless trouble and toil, by the way.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

DarkNSF
DarkNSF's picture
Offline
newbie
Melbourne, FL
Last seen: 13 years 43 weeks ago
Melbourne, FL
Joined: 2008-01-07
Posts: 6
Points: 0

I'm not sure why the design

I'm not sure why the design approach would be backward, I would be more inclined to want to understand you if you gave facts to back that up.

However, I'll work on getting this validated. If that doesn't work I'll bump my post.

Thanks

DarkNSF
DarkNSF's picture
Offline
newbie
Melbourne, FL
Last seen: 13 years 43 weeks ago
Melbourne, FL
Joined: 2008-01-07
Posts: 6
Points: 0

Alright, I'm XHTML and CSS

Alright, I'm XHTML and CSS valid now. I apologize for that. Smile

I am still getting an odd spacing on that menu in IE.

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 10 years 37 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

I'm not too sure what

I'm not too sure what Seedhouse meant either, but I'm inclined to think that you've specified relative positioning, yet you've positioned it absolutely from the top using the top CSS attribute. I'm not too sure if what I've said is even correct, since I'm not too familiar with absolute positioning, but that's my guess.

Looking through your code, I see you're trying to hack for PNG usage. Can I ask why you don't just use GIFs? I use GIFs, and I'm not sure what the cons are.

Your markup isn't very semantic. This is just my opinion, but you should separate your header image from your navigation into two different divs. Try coding it like this, using margins rather than specifying top, left, right, and bottom. I think you may see more favorable results this way. However, if you're stuck, I'm more than willing to help you out, just post back here.

No offense intended here, but one has to wonder how you're going to offer web design services if your CSS isn't up to snuff. I like your page design/concept a lot, but you need to work on your coding.

DarkNSF
DarkNSF's picture
Offline
newbie
Melbourne, FL
Last seen: 13 years 43 weeks ago
Melbourne, FL
Joined: 2008-01-07
Posts: 6
Points: 0

Honestly, I'm not a css guy.

Honestly, I'm not a css guy. I'm a PHP/JavaAJAX/XML/SQL kinda guy. I've only recently switched to pure div's in the past 6 months. I'm not the only person in my corporation so it doesn't matter Smile

I also highly doubt I'm the only person here that sells webdesign services that has asked a CSS question on these forums. To automatically assume that webdesign business owners know everything and need absolutely no help what so ever is very feeble minded. Smile

Are you kidding me? use a gif over a gradient background? png's allow more than one color for the transparency layer (as opposed to gif).
Look at this example: http://homepage.ntlworld.com/bobosola/pngtest.htm

But looking back at the menu now I do see that I am using 'top' which is suppose to be used in absolute positioning (just like bottom, left, or right). Thanks for the pointers.

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 10 years 37 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

I didn't mean that you were

I didn't mean that you were not entitled to help just because you ran a web design business, I just meant that if you were in a solo venture, it might need some reevaluation, that's all.

As far as images go, I've never had that problem. If you go to http://www.damnneardoomed.com/, you can see my banner, nav bar, heading bars all are transparent(around the corners) GIFs and look fine... I'm not sure why though, after looking at that link.

marcosmyara
Offline
Enthusiast
Last seen: 12 years 28 weeks ago
Joined: 2007-12-19
Posts: 66
Points: 0

darknsf, theres nothing

darknsf, theres nothing wrong with using bottom, top, right and left values on relative positioned elements, for example, if left:6px it just means it would be positioned 6px to the left of the original position that the element would take (on the flow of the html)..

under line-height:1.4, you should specify a value, always, for example line-height:1.4em, except when the value is zero..

now i cant really test solutions for your page beacuse im on a firefox mac, but i did see the problem on a pc thats by my side, try switching the top:65px (i think it was 65 anyway) to margin-top:XXpx, being XX the right distance for it to look good, ull have to try it out.

edit: then u wont need the position:relative either, u can take that out..

hope that solves it good luck..

Marcos.

DarkNSF
DarkNSF's picture
Offline
newbie
Melbourne, FL
Last seen: 13 years 43 weeks ago
Melbourne, FL
Joined: 2008-01-07
Posts: 6
Points: 0

Nice website. I dig the

Nice website. I dig the roundedness Smile

The reason that your rounded corners show up fine is because you only have ONE color to be transparent over. If you had an image or gradient as a background you would have to change to using png's. It would still be very hard to tell though, your corners look to be rounded by 5px or so.

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 10 years 37 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

DarkNSF - Thanks for the

DarkNSF - Thanks for the clarification on images.

marcosmyara - Yeah, you could do relative positioning with top, right, bottom, and left, but why? Why not just use margins? I mean, I don't think it's wrong to do it, but that's the only thing I could think of that Ed Seedhouse could have been calling backward.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

DarkNSF wrote:I'm not sure

DarkNSF wrote:
I'm not sure why the design approach would be backward, I would be more inclined to want to understand you if you gave facts to back that up.

Well, first it's an opinion, but for what it's worth I think your design approach is backwards because you are designing a site without content. Unless and until you have your content marked up semantically with valid html you are designing in a vacuum.

Design is meant to serve content and make it most easily (and one hopes stylishly) available to the visitor. By designing a framework first and then shoehorning content in later you run a serious risk of ending up with a "Bed of Procrustes".

People come to sites for their content, not for their cool looks. So get your content marked up first because style should serve content, not vice-versa.

As I said that's my opinion. It is shared by people far more eminent than myself, including the person who designed the web in the first place.

Take a look at the "Truth and Consequences" site if you want some of the reasons behind my thinking.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

DarkNSF
DarkNSF's picture
Offline
newbie
Melbourne, FL
Last seen: 13 years 43 weeks ago
Melbourne, FL
Joined: 2008-01-07
Posts: 6
Points: 0

i wouldn't trust a document

i wouldn't trust a document that has that written in it. maybe if you have a plain html site with absolutely no server side code to it....

i don't know if you've done any PHP or any other server side language, but it is generally a good idea to create a template. it's a pretty common practice in programming to prevent redundant code. you wouldn't want to put furniture in the house until you have a roof.. Wink

infact, now since the major bugs have been pounded out (except IE6 alpha issue); i will convert this to a php template later on today.

btw, margin-top fixed the problem. thanks guys Smile

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 10 years 37 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

I think there's some

I think there's some validity in both your opinions. For instance, you need to know how the content, whatever it may be, will be put into the page, which it seems like you do (white blocks indicate this). However, I don't think the content actually has to be there...

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

DarkNSF wrote:i don't know

DarkNSF wrote:
i don't know if you've done any PHP or any other server side language, but it is generally a good idea to create a template.

I've mostly done server side stuff with PHP, as a matter of fact. I still disagree with you. Output from a database is still content and it needs to be marked up semantically for good results. Your page design has to take it's nature into account. Just because I am doing server side code doesn't mean I can ignore the nature of the web.

How many websites do you visit again and again just because they are pretty? Content is king, and you ignore that at your peril, in my experience and opinion. The importance of design is vastly over-rated. The sites I visit most are by and large lousy designs that just happen to provide excellent content.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Another IE bug

You're seeing the results of IE's mis-handling of margin-collapse. A float element's margin should not collapse, but IE … :shrug:

Set ul {margin: 0;}, and both browsers will render the same. Adjust top to fit.

You should also set ul {padding: 0;}. IE and Opera use margin-left to set the list's indention, while Firefox and Konqueror/Safari use padding-left. Control indention by normalizing to zero and setting either padding-left xor margin-left to the desired value.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.