Who can check my code? Minor problem on my CSS page. . .

[S]

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

['sNiek]

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
..controlSectio n and chage <div id="controlSect ion"> to <div class="controlS ection">
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]

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

[djinn]

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 ............

..controlSectio n {
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..........

..controlSectio n ul li a {
/* margin-left: -40px;*/
}

Take out the /* and the */'s and you should be good to go :-)

--
chin chin
Sinclair

[kchayka]

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.

[S]

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 3r************@ individual.net, "kchayka"
<us****@c-net.us> wrote:

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.

[djinn]

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.....

..controlSectio n {
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........

..controlSectio n {
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

[boclair]

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. . .

-----------Steve

http://www.dorseygraphics.com/toolbar_1a/

http://www.dorseygraphics.com/toolbar_1a/css/styles.css

Perhaps declare display:block on the images to remove space for descenders.

Louise

[S]

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 j9************* *******@pipex.n et, "djinn"
<sc*****@dsl.pi pexYerKitAff.co m> wrote:

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

[kchayka]

boclair wrote:

S wrote:

But there are still gaps between each title bar and the links below it.

http://www.dorseygraphics.com/toolbar_1a/

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.