This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Stylesheets > October 2005 > Who can check my code? Minor problem on my CSS page. . .
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
Who can check my code? Minor problem on my CSS page. . .
|
|
|
|
| 'sNiek 2005-10-21, 3:18 am |
| S schreef:
> Hello
>
> My title bars are not lining up. Simple problem for an expert, but I'm not
> one yet. ;)
>
> http://www.dorseygraphics.com/toolbar_1a/
>
> http://www.dorseygraphics.com/toolbar_1a/css/styles.css
>
> Any ideas?
>
> Thanks,
>
> ------------S
>
Okeh,
Look at:
#controlSection {
~snip~
margin-top: -14px;
}
I think that that makes IE deceide to move the box 14 pixels to the top of its location. So concentrate on
that part.
But remember that you can use an id only once on a page, zo you should shange #controlSection to
..controlSection and chage <div id="controlSection"> to <div class="controlSection">
For the rest it's pretty okeh, one more hint though.
You can shorten code like:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
to:
body {
margin: 0;
}
No need for units if it's zero
margin: 2px 4px 6px 8px cab be read like this: margin: top right bottom left (clockwise!)
and code like:
border-left-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-color: #8a8a8a;
border-right-color: #8a8a8a;
border-bottom-color: #8a8a8a;
to:
border: 1px solid #8a8a8a;
border-top: none;
That will keep your code comacte and comprehensible
Good luck
--
Niek
| |
|
|
|
| S wrote:
> Thanks for previous input.
>
> I'm still encountering problems with my code in that my items are
> rendering in browsers with gaps between the content and the headers. Also,
> my links are being pushed to the right in stead of being left justified with
> a 4 pixel margin.
>
> http://www.dorseygraphics.com/toolbar_1a/
>
> http://www.dorseygraphics.com/toolbar_1a/css/styles.css
>
> I'm pretty confused here. Any help is appreciated.
>
> Thanks,
>
> -----------------Steve
>
Hey,
You need to take away the comment marks, yjat should sort you out, so
like ............
..controlSection {
width:128px;
background-color: #ebebeb;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: left;
text-indent: 4px;
border: 1px solid #8a8a8a;
border-top: none;
/* margin-top: -14px;*/
}
and..........
..controlSection ul li a {
/* margin-left: -40px;*/
}
Take out the /* and the */'s and you should be good to go :-)
--
chin chin
Sinclair
| |
| kchayka 2005-10-22, 6:24 pm |
| S wrote:
>
> I'm still encountering problems with my code in that my items are
> rendering in browsers with gaps between the content and the headers. Also,
> my links are being pushed to the right in stead of being left justified with
> a 4 pixel margin.
>
> http://www.dorseygraphics.com/toolbar_1a/
Lists have default margins and/or padding at top, bottom and left.
Set margin:0 and padding:0 on both the ul and li elements to start, then
adjust to taste.
--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
| |
|
| Looks better,
But there are still gaps between each title bar and the links below it.
Thanks for everything, so far, by the way. . .
-----------Steve
http://www.dorseygraphics.com/toolbar_1a/
http://www.dorseygraphics.com/toolbar_1a/css/styles.css
On 10/22/05 2:45 PM, in article 3rvq99FlpvgrU1@individual.net, "kchayka"
<usenet@c-net.us> wrote:
> S wrote:
>
> Lists have default margins and/or padding at top, bottom and left.
> Set margin:0 and padding:0 on both the ul and li elements to start, then
> adjust to taste.
| |
| djinn 2005-10-22, 10:20 pm |
| S wrote:
> Looks better,
>
> But there are still gaps between each title bar and the links below it.
>
> Thanks for everything, so far, by the way. . .
>
Hehehe now it's changed a little - you still need to lose the comments
here - so change this.....
..controlSection {
width:128px;
background-color: #ebebeb;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: left;
text-indent: 4px;
border: 1px solid #8a8a8a;
border-top: none;
/* margin-top: -4px;*/
}
for this........
..controlSection {
width:128px;
background-color: #ebebeb;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: left;
text-indent: 4px;
border: 1px solid #8a8a8a;
border-top: none;
margin-top: -4px;
}
HTH
--
chin chin
Sinclair
| |
|
|
|
| Makes sense, but I was told a while back that I should not have to use
negative numbers in margins and padding. That's why those lines were
commented out - they worked as a fix, but it didn't seem like the "right"
way to code the page.
I am currently using the negative margin, and it seems to be working, but
now I have a different problem.
In MSIE 6 Windows, the links are underlined, even though I have clearly used
a "text-decoration: none;" tag in all of the a links. The links look great
in other browsers/platforms, but MSIE 6 Win is screwing up.
Is this a common problem?
Thanks again,
-----------------S
http://www.dorseygraphics.com/toolbar_1a/
http://www.dorseygraphics.com/toolbar_1a/css/styles.css
On 10/22/05 5:55 PM, in article j9OdnV7sopf5QsfeRVnyjQ@pipex.net, "djinn"
<scobies@dsl.pipexYerKitAff.com> wrote:
> S wrote:
>
> Hehehe now it's changed a little - you still need to lose the comments
> here - so change this.....
>
> .controlSection {
>
> width:128px;
> background-color: #ebebeb;
> font-family: Arial, Helvetica, sans-serif;
> font-size: 10px;
> text-align: left;
> text-indent: 4px;
> border: 1px solid #8a8a8a;
> border-top: none;
> /* margin-top: -4px;*/
> }
>
> for this........
>
> .controlSection {
>
> width:128px;
> background-color: #ebebeb;
> font-family: Arial, Helvetica, sans-serif;
> font-size: 10px;
> text-align: left;
> text-indent: 4px;
> border: 1px solid #8a8a8a;
> border-top: none;
> margin-top: -4px;
> }
>
>
> HTH
| |
| kchayka 2005-10-23, 6:20 pm |
| boclair wrote:
> S wrote:
>
> Perhaps declare display:block on the images to remove space for descenders.
Images are aligned at baseline by default, so another method is
img {vertical-align:bottom}
--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
| |
| boclair 2005-10-23, 10:16 pm |
| kchayka wrote:
> boclair wrote:
>
>
>
>
> Images are aligned at baseline by default, so another method is
> img {vertical-align:bottom}
>
This has caused me to actually look at the source because I would like
some issues cleared up.
The OP has
<div id="container">
<span class="palletteImage"><img src="image/cp_t_tools.gif" alt=""
width="130" height="15" /></span>
with the class selector
..palletteImage {padding: 0px; margin: 0px;}
The first thing that needs to be done is replace <span> with <div>
When the image is interpreted as text, the default is to render space
for the descender isn't it? So as you say
div.palletteImage img {vertical-align:bottom;}
However if the image is interpreted as a block element, there is no
provision for the descender? So
div.palletteImage img {display:block;}
If I am wrong in this understanding I would be pleased to know.
Actually this is still too verbose as there is no need for the div. So
<div id="container">
<img src="image/cp_t_tools.gif" class="palletteImage" alt="" width="130"
height="15" /></div>
and
img.palletteImage {display:block;}
or
img.palletteImage {vertical-align:bottom;}
I had expected the validator(W3) to report an error in the
vertical-align:bottom but not so.
BTW I notice that the page is not well formed for other reasons,
supposing it even needs to be xhtml rather than html strict
Louise
| |
| boclair 2005-10-23, 10:16 pm |
| In-Reply-To: <BF810E23.189B%junksolid@XXXXXXXXXX>
Content-Type: text/plain; charset=ISO-8859-1; format=flowed
Content-Transfer-Encoding: 7bit
Lines: 13
Message-ID: <r6W6f.26019$U51.19348@news-server.bigpond.net.au>
Date: Mon, 24 Oct 2005 00:43:03 GMT
NNTP-Posting-Host: 138.130.208.56
X-Complaints-To: abuse@bigpond.net.au
X-Trace: news-server.bigpond.net.au 1130114583 138.130.208.56 (Mon, 24 Oct 2005 10:43:03 EST)
NNTP-Posting-Date: Mon, 24 Oct 2005 10:43:03 EST
Organization: BigPond Internet Services
Xref: newsfeed-west.nntpserver.com comp.infosystems.www.authoring.stylesheets:100056
S wrote:
>
> In MSIE 6 Windows, the links are underlined, even though I have clearly used
> a "text-decoration: none;" tag in all of the a links. The links look great
> in other browsers/platforms, but MSIE 6 Win is screwing up.
>
> Is this a common problem?
Not quite. Instead set the rule text-decoration:none; on the "a"
selector. Declarations on "a" will inherit to all pseudo states.
Louise
| |
| kchayka 2005-10-24, 6:35 pm |
| boclair wrote:
> kchayka wrote:
>
> The OP has
>
> <div id="container">
> <span class="palletteImage"><img src="image/cp_t_tools.gif" alt=""
> width="130" height="15" /></span>
>
> The first thing that needs to be done is replace <span> with <div>
<span> isn't necessarily wrong, but we need to look at the bigger
picture. In context, those images are acting as headings, so some <hx>
markup would be more appropriate, methinks.
In this case, though, the OP should be using plain text instead of
images. A background image could be applied, if needed.
> When the image is interpreted as text, the default is to render space
> for the descender isn't it?
That's what vertical-align:baseline (the img default) does.
<URL:http://www.w3.org/TR/CSS21/visudet....-vertical-align>
--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
| |
|
| Great input - thanks.
I'm still learning, so please bear with me.
I integrated your suggestions as to replacing SPAN with DIV. Works great
now. Also, the page and the CSS check out with w3 as long as I use a
"transitional" HTML classification.
Questions:
- If I use a SPAN on an image, this causes it to be interpreted as text? How
so?
- Will use of "transitional" cause my pages to be drawn or recognized as
different somehow? What are the perils of doing this?
Thanks
------------S
| |
| kchayka 2005-10-24, 6:35 pm |
| S wrote:
>
> - If I use a SPAN on an image, this causes it to be interpreted as text? How
> so?
Learn the difference between block and inline elements.
Some block elements are div, p, h1-h6.
Some inline elements are span, img, a, strong, em.
<URL:http://www.w3.org/TR/CSS21/visuren.html#normal-flow>
BTW, don't use div or span when there is a more appropriate element for
the particular content.
> - Will use of "transitional" cause my pages to be drawn or recognized as
> different somehow? What are the perils of doing this?
There should be no reason to use a Transitional DOCTYPE on new pages.
You're probably relying on "quirks mode" rendering to get a particular
effect. This can have undesireable results in a standards-conforming
browser.
<URL:http://hsivonen.iki.fi/doctype/>
--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
| |
| boclair 2005-10-24, 10:20 pm |
| > boclair wrote:
>
[color=darkred]
>
>
> <span> isn't necessarily wrong, but we need to look at the bigger
> picture. In context, those images are acting as headings, so some <hx>
> markup would be more appropriate, methinks.
All your points are taken. Just one thing, IE, doing its own thing,
renders differently (and non-standardly) if span is used instead of div.
I should have been more careful. But as you point out neither is
semantically valid.
>
>
> That's what vertical-align:baseline (the img default) does.
> <URL:http://www.w3.org/TR/CSS21/visudet....-vertical-align>
Sorry, but I have only a blurry concept of vertical-align. I find the
Reference's treatment of vertical-align especially replete with
technical jargon and obscure in its language.
What, for example, is the meaning of
"bottom: Align the bottom of the aligned subtree with the bottom of the
line box".
But before that what is the form of an image box? It is an inline box;
is a replaced object having an inherent height property but is rendered,
by default (baseline), with allowance for descenders?
Can I assume then that the subtree is the unadorned object and this is
what vertical-align:bottom draws.
Louise
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|