Viewing Thread:
"Onions Please"

I'm working on a new website. Design isn't my strength, but this is my biggest ever site by a factor two, so I wanna make it good. I've done two designs so far (the odd bit of tweaking still needed here and there) and I'm looking for ideas.

I need to have a main menu and a submenu in each case - which is why I have a main menu and a submenu on both (see, cunning!). Also, all the photos are going to be thumbnailed on the sidebar of each page rather than embedded in the page - don't ask, it's a long story.

Anyway, onions please:

www.ksdev.ath.cx:1234/Starr/website/1.php
www.ksdev.ath.cx:1234/Starr/website/2.php

They're not links for a reason, so please don't post back with links. Also, they're running off my PC, and as such won't be available when my PC isn't on - it's usually turned on between around 9am and 11pm or thereabouts.

Cheers peeps.

* html body whatever {
ie-only: value;
}

I guess I should just add a little explanation as to how this works. The * represents any element in the chain of elements in the current web page. However, as the html element is the root (top level, first one, however you look at it) the * should not be applied to any style which includes the html bit within it.

Internet Explorer applies the style anyway, incorrectly, but does allow for styles to be set exclusively for IE.

You can also use child selectors to hide styles from IE, as it doesn't support that CSS section, for example:

body>div>h1 {
property: value;
}

... won't be applied by IE, as it doesn't read child selectors.

A word of warning though, IE 7 may change this, so keep an eye out when the BETA is released.

Hmmm... wrote:
> Either paste the full URI or don't be so lazy and post your threads
> using proper freeola links !! [URL] [/URL]
>
> Or sort you server out to recognise non http requests... ;¬)

I don't paste the links for the reason I mentioned in the other thread. [URL]http://ukchatforums.reserve.co.uk/display_messages.php?threadid=127652&forumid=206[/URL]

And I think IE not recognising it as HTTP because it is on port 1234. I don't think it's my server setup, though if I'm wrong, please feel free to tell me how to configure it and I shall do.

> Hmmm... wrote:
> Whenever I try to visit your sites they're unavailable...
>
> Are you using IE? If so, make sure you put in the http:// first else
> it has a hissy fit.

Ah..
If I insert http:// (I'm using IE) then I can view the page!
I see in FF this isn't necessary for your server setup...

Either paste the full URI or don't be so lazy and post your threads using proper freeola links !! [ URL] [ /URL]

Or sort you server out to recognise non http requests... ;¬)

cjh wrote:
> If IE is the only problem regarding padding, just use the star
> selector hack for now, so only IE reads the styles:
>
> * html body whatever {
> padding-top: ie-only-value;
> }

Worked a charm - cheers. I really need to get a good book on CSS, since the W3Schools site for CSS isn't great.

I'm tempted to use my computer help design for this site. Change the colour schemes and the images and it could work quite well.

http://www.xyhelp.ksdev.ath.cx:1234

Make the bars green instead of blue, and a pale green background....hmmm... I shall attempt that me thinks.

If IE is the only problem regarding padding, just use the star selector hack for now, so only IE reads the styles:

* html body whatever {
padding-top: ie-only-value;
}

Hmmm... wrote:
> Whenever I try to visit your sites they're unavailable...

Are you using IE? If so, make sure you put in the http:// first else it has a hissy fit.

cjh wrote:
> "In firefox the menu bar is slightly shorter"
>
> This is because of the padding-top: 10px; property within the
> content section. The browser is building the section to 100%,
> as instructed, then applying the 10px padding.
>
> It is one area in the W3C standards which I feel was done
> incorrectly, and the IE box model made sense (even if they did build
> it by accident), but that's just my personal opinion (suppose it
> could be a Firefox bug too).
>
> Oh, as for IE, try adding:
>
> * html body div#content {
> overflow:inherit;
> }
>
> ... to see if the content section stretches.

Ahhh, the padding! I was trying to be really careful using it, but obviously I missed one. Corrected that, but it forces the content to be very high in IE - I'll have a go at that later, shouldn't be too hard.

I put in your code, but to no avail. Think I'll go for something like a 160px border and play with margins. That's how I got it to work in my other design.

Whenever I try to visit your sites they're unavailable...

"In firefox the menu bar is slightly shorter"

This is because of the padding-top: 10px; property within the content section. The browser is building the section to 100%, as instructed, then applying the 10px padding.

It is one area in the W3C standards which I feel was done incorrectly, and the IE box model made sense (even if they did build it by accident), but that's just my personal opinion (suppose it could be a Firefox bug too).

Oh, as for IE, try adding overflow:inherit; to the content styles, or just:

* html body div#content {
overflow:inherit;
}

... to see if the content section stretches.

The first one is probably the better bet.

Although, the content text could be padded in lightly through a few pixels