I'm hoping somebody has a better answer to this than to create button images.
I've created my first site using CSS. Everything seems to work properly, except the nav buttons. I am using an external style sheet.
What happens is that when the site is first accessed, the buttons are not displayed. What you see is textallruntogetherlikethis. The links still work, and once you visit a page, its button displays properly across the whole site.
I can't find anything wrong with my code. I'll post it here if you think it will help, but it's pretty vanilla.
My doctype statement is: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">, in case this has any bearing.
TIA
Aronya1Originally posted by Aronya1
I'll post it here if you think it will help, but it's pretty vanilla.
Please do.
Also tell us which browser you used.OK, here's the code. I have to admit, I did find an error on the border-style setting of the hover & active buttons. I had a semi-colon (
instead of a full colon 
). The code is corrected here, but I have not had a chance to test. Please let me know if you spot anything else.
Many thanks.
Aronya1
a.button:link
{
font-size:10pt;
font-weight:none;
text-decoration: none;
border-style
utset;
border-color:white;
border-width:5px;
background-color:navy;
width:"";
color:white;
}
a.button:visited
{
font-size:10pt;
font-weight:none;
text-decoration:none;
border-styleutset;
border-color:white;
border-width:5px;
background-color:navy;
width:"";
color:white;
}
a.button:active
{
font-size:10pt;
font-weight:none;
text-decoration:none;
border-style:inset;
border-color:red;
border-width:5px;
background-color:white;
width:"";
color:red;
}
a.button:hover
{
font-size:10pt;
font-weight:none;
text-decoration:none;
border-style:inset;
border-color:red;
border-width:5px;
background-color:white;
width:"";
color:red;
}First of all, I'd rely on something more than just CSS to avoid textrunningintogether.
<div class="button">
<a href...>Link 1</a> <span>|</span> <a href...>Link2</a>...
</div>
and change the CSS to
div.button a:link {...}
and so forth. As well as add
div.button span {display: none}
Try using width: auto instead of width: ""; I am not sure how browsers will interpret the latter.
To get spacing between images, set a margin (eg. margin: 0 10px}
You can reduce the size of your CSS:
a.button {font-size:10pt;
font-weight:normal;
text-decoration: none;
border-style: outset;
border-color:white;
border-width:5px;
background-color:navy;
width:auto;
color:white;
}
a.button:hover, a.button:active{border-style:inset;
border-color:red;
background-color:white;
color:red;
}nkaisare,
Thanks for the input. I'll try it out, but CSS is new to me, so I'll have to do some studying to better understand your code (I haven't used DIV or SPAN yet). I've already replaced the CSS buttons with a table (I know! I know!), but will switch it back if I can make things work.
Thanks again, and I'll try to follow up here with the results.
Aronya1Originally posted by Aronya1
I've already replaced the CSS buttons with a table (I know! I know!)
Hopefully you'll come back to CSS. We'll be "waiting for you" on this side of the fence
I've created my first site using CSS. Everything seems to work properly, except the nav buttons. I am using an external style sheet.
What happens is that when the site is first accessed, the buttons are not displayed. What you see is textallruntogetherlikethis. The links still work, and once you visit a page, its button displays properly across the whole site.
I can't find anything wrong with my code. I'll post it here if you think it will help, but it's pretty vanilla.
My doctype statement is: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">, in case this has any bearing.
TIA
Aronya1Originally posted by Aronya1
I'll post it here if you think it will help, but it's pretty vanilla.
Please do.
Also tell us which browser you used.OK, here's the code. I have to admit, I did find an error on the border-style setting of the hover & active buttons. I had a semi-colon (
instead of a full colon ). The code is corrected here, but I have not had a chance to test. Please let me know if you spot anything else.Many thanks.
Aronya1
a.button:link
{
font-size:10pt;
font-weight:none;
text-decoration: none;
border-style
utset;border-color:white;
border-width:5px;
background-color:navy;
width:"";
color:white;
}
a.button:visited
{
font-size:10pt;
font-weight:none;
text-decoration:none;
border-style
utset;border-color:white;
border-width:5px;
background-color:navy;
width:"";
color:white;
}
a.button:active
{
font-size:10pt;
font-weight:none;
text-decoration:none;
border-style:inset;
border-color:red;
border-width:5px;
background-color:white;
width:"";
color:red;
}
a.button:hover
{
font-size:10pt;
font-weight:none;
text-decoration:none;
border-style:inset;
border-color:red;
border-width:5px;
background-color:white;
width:"";
color:red;
}First of all, I'd rely on something more than just CSS to avoid textrunningintogether.
<div class="button">
<a href...>Link 1</a> <span>|</span> <a href...>Link2</a>...
</div>
and change the CSS to
div.button a:link {...}
and so forth. As well as add
div.button span {display: none}
Try using width: auto instead of width: ""; I am not sure how browsers will interpret the latter.
To get spacing between images, set a margin (eg. margin: 0 10px}
You can reduce the size of your CSS:
a.button {font-size:10pt;
font-weight:normal;
text-decoration: none;
border-style: outset;
border-color:white;
border-width:5px;
background-color:navy;
width:auto;
color:white;
}
a.button:hover, a.button:active{border-style:inset;
border-color:red;
background-color:white;
color:red;
}nkaisare,
Thanks for the input. I'll try it out, but CSS is new to me, so I'll have to do some studying to better understand your code (I haven't used DIV or SPAN yet). I've already replaced the CSS buttons with a table (I know! I know!), but will switch it back if I can make things work.
Thanks again, and I'll try to follow up here with the results.
Aronya1Originally posted by Aronya1
I've already replaced the CSS buttons with a table (I know! I know!)
Hopefully you'll come back to CSS. We'll be "waiting for you" on this side of the fence