32 replies [Last post]
jesseleite
jesseleite's picture
Offline
Regular
Last seen: 11 years 5 weeks ago
Joined: 2007-03-08
Posts: 26
Points: 0

Hello,

I'm new to CSS, and just started learning today. I have created a basic test site, in which a division's padding looks different in both IE and Firefox.

http://www.aurorafxstudios.com/v5/padding_issue.jpg

(or if you want to try switching browsers yourself,
http://www.aurorafxstudios.com/v5/ )

As you can see, if you are running firefox, it looks like the padding above and below the text is greater than the padding on the sides of the text. In Internet Explorer, it looks like the padding is equal all the way around. What am I doing wrong here. How do I make it look equal all around the text within the divison box.

Also, what seems weird to me is that I have the divison box set to 700px. However, it appears to be a different width when comparing browsers (as you can also see in the picture i included).

Why are these things happening?

Jesse

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

Please read the sticky

Please read the sticky messages at the top of the forum message list. They are there for a reason.

Ed Seedhouse

Posting Guidelines

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

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Ed Seedhouse wrote:Please

Ed Seedhouse wrote:
Please read the sticky messages at the top of the forum message list. They are there for a reason.

Ed means, please use a doctype and you will also need character encoding.

FYI this is the default blank page I use, but others have other ideas:

Your Page Title Here

html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{
margin:0px;
padding:0px;
border:0px;
border-collapse:separate;
border-spacing:0px;
}
input,select{
margin:0;
padding:0;
}
body{
font-family:verdana,arial,sans-serif;
font-size:100.1%;
}
strong,b{
font-weight:bold;
}
p{
font-size:90%;
line-height:1.1em;
}
.floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px}
.floatcontainer{display: inline-block;}
/* Hides from IE Mac \*/
* html .floatcontainer {height:1%}
.floatcontainer{display:block}
/* End Hack */

jesseleite
jesseleite's picture
Offline
Regular
Last seen: 11 years 5 weeks ago
Joined: 2007-03-08
Posts: 26
Points: 0

i apologize ed. thank you

i apologize ed.

thank you for the info trevor(?). i read the sticky, and added the doctype. that didn't dolve my problem. however, putting the following code at the beginning of my css file worked:

html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{ margin:0px; padding:0px; border:0px; border-collapse:separate; border-spacing:0px;*/ }

i tried each of the properties separately, and setting the margins to zero alone fixed the problem. however, i'm guessing that having all 5 of those properties may help with future browser interpretation problems.

thanks.
jesse

gabi_cavaller
Offline
Regular
UK
Last seen: 10 years 49 weeks ago
UK
Joined: 2007-01-25
Posts: 28
Points: 0

I think by adding that and

I think by adding that and having the correct doctype stops the browser going into something called the qwerky mode (i think thats what its called) when it goes into this mode, each browser interprets the code in a different way, thus giving you slightly different outputs on each browser.

Smile

jesseleite
jesseleite's picture
Offline
Regular
Last seen: 11 years 5 weeks ago
Joined: 2007-03-08
Posts: 26
Points: 0

you're right. i read about

you're right. i read about the quirky mode. however, even when i set the doctype (to strict instead as opposed to quirky), it still looked different. firefox for some reason added a default margin value that was not zero to my and

tags.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

I use that basic blank

I use that basic blank document setup because it sets all browsers to the same defaults.

jesseleite
jesseleite's picture
Offline
Regular
Last seen: 11 years 5 weeks ago
Joined: 2007-03-08
Posts: 26
Points: 0

thank you for your help once

thank you for your help once again. i finished my site, although it does not have any hover effects on the icons yet. can css do hover effects on images?, i've done searches but everything i find is on text a link hovers.

http://www.aurorafxstudios.com/

my second question has to do with scrolling. if you make the window smaller than 800x600 and allow the browser to cut off the site, it is fully scrollable in firefox. however, in IE you cannot scroll all the way to the top. do you know why this is?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Owch. You don't actually

Owch.

You don't actually have any content on your page. With CSS disabled, all you get are a few images.

With images disabled, you get . . . a blank page.

Verschwindende wrote:
  • CSS doesn't make pies

jesseleite
jesseleite's picture
Offline
Regular
Last seen: 11 years 5 weeks ago
Joined: 2007-03-08
Posts: 26
Points: 0

why does it matter what it

why does it matter what it looks like with css disabled? isnt css a standard now, that all browsers should use it?

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

jesseleite wrote:why does it

jesseleite wrote:
why does it matter what it looks like with css disabled? isnt css a standard now, that all browsers should use it?

But html is also a standard, and it's intended to be used to mark up content semantically, that is according to it's meaning. Layout without content is meaningless. There are people who won't be able to use your CSS that may still want to be able to use your site. People without working eyes, for instance. The way to help them is to write html that makes sense without CSS. And one way to help make sure you are doing that it to view your html without CSS yourself.

Ed Seedhouse

Posting Guidelines

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

jesseleite
jesseleite's picture
Offline
Regular
Last seen: 11 years 5 weeks ago
Joined: 2007-03-08
Posts: 26
Points: 0

that makes sense. my site

that makes sense. my site really doesn't have any content though. you can still use the images links without css, as well as see the information in the portfolio, the services, and the contact page. they are just not arranged at all to suit html, as 99% of users will be viewing the site in css.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 19 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Several of the most

Several of the most important visitors to your site are blind; search engines. If they can't "see" anything, you won't have many of those other 99%.

Most mobile devices use a restricted set of css properties, if they use css at all.

Yours may be an ego site, but if you're selling anything, services, goods or ideas, you'd better be aware of the number of handicapped people working as buyers. I personally know of two, both blind, who make major buying decisions for their companies. One uses a Braille pad to buy supplies for a printing company, and the other uses a screen reader to buy for an electronics manufacturing company.

Finally, there is the issue of quality and professionalism. There is no excuse for shoddy workmanship when you could be producing well structured, semantic and well formed html plus css for presentation plus javascript for behavior. It is the quality html that creates the DOM, which both the css and the javascript actually work against.

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.

jesseleite
jesseleite's picture
Offline
Regular
Last seen: 11 years 5 weeks ago
Joined: 2007-03-08
Posts: 26
Points: 0

Ok you sold me I don't want

Ok you sold me Smile
I don't want shoddy workmanship for the next time.

How do I re-structure my site using HTML, without changing how the CSS enabled version works and looks? Do you know of any examples of good CSS sites with a good HTML only layout (CSS disabled) so that I can study how they coded it?

Thanks for all your help so far!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

www.csszengarden.com Enjoy!

Verschwindende wrote:
  • CSS doesn't make pies

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 19 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

jesseleite wrote:Ok you sold

jesseleite wrote:
Ok you sold me Smile
I don't want shoddy workmanship for the next time.

Good! I usually just p*ss people off with my remarks. Smile

Quote:
How do I re-structure my site using HTML, without changing how the CSS enabled version works and looks? Do you know of any examples of good CSS sites with a good HTML only layout (CSS disabled) so that I can study how they coded it?

The first and hardest thing to understand is that html is not about layout. It only tells the UA what the content bits are. The browsers have built in style sheets that governs the default layout/presentation, but even that isn't universal.

The way you do html is to simply mark each element with the appropriate tag. That's it. When styling, you may want to group some elements or apply a class or id to use as contextual hooks for styling. But, that's after you have semantic content.

Take a look at my home page. Use a non graphic browser like Lynx and a graphic browser with author styles turned off. Then compare to the styled view. Study the html markup—see how simple it is? See how the styles are applied for the presentation part.

Quote:
Thanks for all your help so far!

Solving other people's problems is one way for all of us to learn.

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.

jesseleite
jesseleite's picture
Offline
Regular
Last seen: 11 years 5 weeks ago
Joined: 2007-03-08
Posts: 26
Points: 0

Changed it, what do you think now?

Makes sense. I took a look at CSS Zen Garden and reconstructed my html pages and css.

http://www.aurorafxstudios.com
Take a look again and let me know if the workmanship is shoddy this time Wink. Now with CSS disabled, there are no images and you can navigate the site and see all the content.

Is there anything else about my code that I should worry about?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 19 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Starting to look good.

Starting to look good.

The span element is for segregating inline bits for special handling. It may not contain a block level element, eg. h1 or h2. Lose the spans, and style the headers.

The menu should be marked up as an unordered list. You don't need the spans or div, just the list markup.

In choosing class or id tokens, don't be descriptive of appearance or layout, like "red" or "leftcol". You might someday decide you want it to be blue or bold, and live on the right. Smile Name things for what they are, something like "thankyou" or "menu".

Doing something so simple can sometimes be very hard.

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.

jesseleite
jesseleite's picture
Offline
Regular
Last seen: 11 years 5 weeks ago
Joined: 2007-03-08
Posts: 26
Points: 0

kk5st wrote:Starting to look

kk5st wrote:
Starting to look good.

Thanks.

kk5st wrote:
The menu should be marked up as an unordered list. You don't need the spans or div, just the list markup.

This is my current navigation/menu code in my html (see below). If I got rid of the divs for each menu link, how would I display the JPG icons using CSS (along with their corressponding "a href" links?). I still have to have a separate div for each jpg icon, correct?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 19 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

The link icons are content.

The link icons are content. They belong in the document, not as background. Notice the required alt attribute. It echoes the image text, and is what a non-graphical browser will render.

The list item is the container for the link which contains the image.

<h1>AuroraFX Studios</h1>

<h2>Site Map:</h2>

<ul>
  <li>
    <a href="cad_services.htm">
      <img src="icon_cad.jpg 
           alt="C.A.D. Services" />
    </a>
  </li>
  
  <li>
    <a href="graphic_design.html">
      <img src="icon_graphic.jpg" 
           alt="Graphic Design" />
    </a>
  </li>
  
  ...
</ul>

In your css, you'll want to add

a img {
    border: none;
    }

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.

jesseleite
jesseleite's picture
Offline
Regular
Last seen: 11 years 5 weeks ago
Joined: 2007-03-08
Posts: 26
Points: 0

the problem with putting the

the problem with putting the images as content into the html file is that if CSS is disabled, you see the pictures still, not the text. correct? wouldn't there be a way to replace the text in the html file with an image using css? i've been searching image replacement in css and finding ideas, but still having problems.

if you look at csszengarden, and disable css in your browser, all you can see is text. there are no images as content. all the images used in all the different styles are all put into the site using css, not html. correct?

(since this has elevated to a new topic, i started a new thread here: http://www.csscreator.com/node/20660)

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

jesseleite wrote:if you look

jesseleite wrote:
if you look at csszengarden, and disable css in your browser, all you can see is text. there are no images as content. all the images used in all the different styles are all put into the site using css, not html.

The Zen Garden is fun, for awhile, but it is a lousy example to follow since it's html is largely unsemantic and it is purposely designed to be used with absolute positioning. If you use it's html coding style as an example you'll end up producing a lot of bad web pages, in my opionon.

Ed Seedhouse

Posting Guidelines

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

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 42 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Ed Seedhouse wrote:The Zen

Ed Seedhouse wrote:
The Zen Garden is fun, for awhile, but it is a lousy example to follow since it's html is largely unsemantic

It's not unsemantic at all. In fact, if you turn CSS off, the page makes perfect sense. It does have some additional markup in the form of spans around headings and extra divs at the end for which you can attach images to, but a lot of my pages make use of similar elements for image replacement purposes.

Granted the CSS that is turned out by people may not be the best but the HTML itself isn't that bad.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

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

Tyssen wrote:Ed Seedhouse

Tyssen wrote:
Ed Seedhouse wrote:
The Zen Garden is fun, for awhile, but it is a lousy example to follow since it's html is largely unsemantic

It's not unsemantic at all. In fact, if you turn CSS off, the page makes perfect sense. It does have some additional markup in the form of spans around headings and extra divs at the end for which you can attach images to, but a lot of my pages make use of similar elements for image replacement purposes.

Granted the CSS that is turned out by people may not be the best but the HTML itself isn't that bad.

Well I stand corrected then.

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: 6 hours 19 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Ed, It mostly looks bad

Ed,

It mostly looks bad because they've added so many divs, spans, classes and id so that (almost?) all parts of the document have hooks for css. It is certainly not representative of good markup practice for any normal page.

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.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 42 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

The word that should be used

The word that should be used to describe the markup is (possibly) unnecessary. I say possibly because if you were to style every element on the page differently, then it wouldn't be unnecessary - you'd need those extra hooks. But in a lot of cases, the extra markup isn't used by every entrant for their styling efforts, so therefore is unnecessary for their particular example.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

The problem I have with the

The problem I have with the Garden is that graphic designers mock up a design in PS, slice it up, and merely apply every image as a bg-image and AP every element.

Verschwindende wrote:
  • CSS doesn't make pies

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 42 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Again, that's got nothing to

Again, that's got nothing to do with the semantic worth of the HTML. It's just that a lot of extra hooks have been used to provide as much flexibility as possible. The trade off for that flexibility is people using CSS in a less than ideal way.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

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

Tyssen wrote:Again, that's

Tyssen wrote:
Again, that's got nothing to do with the semantic worth of the HTML. It's just that a lot of extra hooks have been used to provide as much flexibility as possible. The trade off for that flexibility is people using CSS in a less than ideal way.

Just to be argumentative, why isn't putting in a lot of non-semantic elements just for layout hooks reducing the semantic worth of the HTML? If I (and here the sensitive should avert their eyes) add 10% water to a glass of Bowmore 17 it certainly isn't still whisky, so shouldn't adding non-semantic elements to HTML mean the HTML is no longer semantic?

Ed Seedhouse

Posting Guidelines

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

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Ed Seedhouse wrote:Just to

Ed Seedhouse wrote:
Just to be argumentative, why isn't putting in a lot of non-semantic elements just for layout hooks reducing the semantic worth of the HTML?

MMmmm. Sort of agree. Grudgingly. Except for one or two things. One, the div (and the span for inline bits). The div from w3c:

Quote:
The DIV ... element offer(Drunk a generic mechanism for adding structure to documents. These ... define content to be block-level ... but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets ... to tailor HTML to their own needs and tastes.

I have always taken this to mean that if you are going to add html for styling purposes, the div (and span) are the ones for you.

Second, menu's.

We have lists, and anchors for hyperlinks. All to the good. But using lists for links? This isn't quite what they were designed for, but it sort of makes sense. But which one? DL or UL? To help 508 compliance, I would use the DL and utilize the DT for the extra help for accessibility, and hide it in css.

Quote:
If I (and here the sensitive should avert their eyes) add 10% water to a glass of Bowmore 17 it certainly isn't still whisky, so shouldn't adding non-semantic elements to HTML mean the HTML is no longer semantic?

I've sent the lads round. Given the insult, they were willing to do it for no fee. If Ken catches up with you, you'll know it's him because he is WELL over six feet, ex-forces, very Scottish and very intimidating. Wink

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

ClevaTreva wrote: Quote:If I

ClevaTreva wrote:

Quote:
If I (and here the sensitive should avert their eyes) add 10% water to a glass of Bowmore 17 it certainly isn't still whisky, so shouldn't adding non-semantic elements to HTML mean the HTML is no longer semantic?

I've sent the lads round. Given the insult, they were willing to do it for no fee. If Ken catches up with you, you'll know it's him because he is WELL over six feet, ex-forces, very Scottish and very intimidating. Wink

I assure you it is only a thought experiment, I would never (shudder) do it. However if the lads do show up they should be quick about it as I'm down below half a bottle.

Ed Seedhouse

Posting Guidelines

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

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

I prefer beer, but Ken has a

I prefer beer, but Ken has a really impressive collection of rare whisky's.

If I have to have whisky, I am sorry to say I prefer the smoother Irish and American ones (good old Jimmy and his Bean).

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 42 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Ed Seedhouse wrote:Just to

Ed Seedhouse wrote:
Just to be argumentative, why isn't putting in a lot of non-semantic elements just for layout hooks reducing the semantic worth of the HTML?

Like Trevor pointed out, divs and spans have no semantic meaning so their use in no way implies a meaning that was unintended.

Wrapping everything in table cells, using a series of paragraphs instead of a list, using divs for everything when you could use headings, paragraphs, lists etc - these are all examples of reduced semantic worth because you're using the wrong tag to describe your content.

The divs and spans in the Zen Garden are used as wrappers inside or outside of already perfectly semantic elements - they're adding code weight, but they're not changing the meaning of the content.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference