9 replies [Last post]
kentphoto
Offline
Regular
Vancouver
Last seen: 13 years 17 weeks ago
Vancouver
Joined: 2007-05-03
Posts: 11
Points: 0

Hi all,

I'm new here, and new to CSS. Here is my site for checking. http://www.burbyshirts.com/beta

If you could, please check the pages found at the top nav, and just the "men's" section. In the men's page, there are product panels. Each panel should have a square graphic, color squares underneath, a photo on the right, and the description and payment menus to the right of that.
-Like the attachment shows

I'm having a problem with the square graphic not showing up at all. I'm on a Mac, and can't check in IE. (except for IE for Mac, which is ancient)

Thanks everyone!

AttachmentSize
screen_shot.jpg23.88 KB
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

It checks out ok in IE6 and

It checks out ok in IE6 and Firefox.

I don't like the use of the table for those form selects, it's not very accessible friendly, you could also do with equalizing the length of the inputs and spacing them they don't look right stuck to each other, your screen shot shows a little space but not in FF or IE I'm afraid.

On the main page you have a problem with a double margin bug on #dealio you need top add display:inline to it.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

kentphoto
Offline
Regular
Vancouver
Last seen: 13 years 17 weeks ago
Vancouver
Joined: 2007-05-03
Posts: 11
Points: 0

Thanks Hugo

Thanks for your help. I added the display: inline to #dealio, and will work on making the form selects without using tables.

Like I said, it's my first site in CSS, so it's a "figure it out as I go" process.
Any other advice is really appreciated.

Kent

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Small word of warning IE has

Small word of warning IE has a bug that doesn't allow it to render 1px dotted borders in IE you have dashed instead.

Talking of borders, you should get in the habit of using shorthand rules; the border decs can be written as :

border:1px dotted #000;

which cuts dowm a lot on file size.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

kentphoto
Offline
Regular
Vancouver
Last seen: 13 years 17 weeks ago
Vancouver
Joined: 2007-05-03
Posts: 11
Points: 0

I fixed the form selects,

I fixed the form selects, and equalized the widths. Changed the borders to solid, and I think it looks better.

Any other input would be great!

Kent

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Well it looks fine, Now

Well it looks fine, Now comes the important part , validating the code.

Try to get into the habit of validating your markup as you go, checking and clearing up amy errors that may occur, this is better not left to the last minute.

There are a number of errors that need addressing, you have a number of stray tags not required such as odd spans and a TD wrapping your submit input. With forms try and use the full form elements such as 'fieldset' 'legend', 'label', a filedset should really enclose groups of related form controls and provides a means to contain inputs as required with a strict (you should really be coding to a strict DTD as Trans is for old pages being transitioned towards standards compliance) DTD (as inputs may not directly be children of the form element)

You can hide the styling of these elements such as no borders for fieldsets.

With heading tags it's generally accepted that H1 should only be used once per page, it's the primary heading, so your H1 should perhaps be '#2' although I might think about some other form of semantic description such as a DL list with DT being the product title a DD the product description and a further DD for the Price.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

kentphoto
Offline
Regular
Vancouver
Last seen: 13 years 17 weeks ago
Vancouver
Joined: 2007-05-03
Posts: 11
Points: 0

"With forms try and use the

"With forms try and use the full form elements such as 'fieldset' 'legend', 'label', a filedset should really enclose groups of related form controls and provides a means to contain inputs as required with a strict (you should really be coding to a strict DTD as Trans is for old pages being transitioned towards standards compliance) DTD (as inputs may not directly be children of the form element)"

I changed the Doctype, but I'm not sure what you mean by using full form elements. Do you mean like how I have the form enclosures on the contact page?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

kentphoto wrote: I changed

kentphoto wrote:

I changed the Doctype, but I'm not sure what you mean by using full form elements. Do you mean like how I have the form enclosures on the contact page?

yep, the contact page is closer to a complete form but notice now that you have changed to a strict DTD that you are throwing a "element not allowed here" error due to the labels/inputs being direct children of 'form' which is where you would use a fieldset element to wrap your form controls.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

kentphoto
Offline
Regular
Vancouver
Last seen: 13 years 17 weeks ago
Vancouver
Joined: 2007-05-03
Posts: 11
Points: 0

Does the form on the contact

Does the form on the contact page look alright now?

http://www.burbyshirts.com/beta/contact.html

Thanks for all you help.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You're almost there, couple

You're almost there, couple of things; with the field sets , you could probably get away with a single one, they are a method of logically grouping related sets of controls, what you have is just one group.

Withe the descriptive text you should use the <label> tag to hold it rather than bare naked text.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me