Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

H3 tag problem 1

Status
Not open for further replies.
LaneyVC50

LaneyVC50

Technical User
Mar 1, 2002
17
GB
I'm using CSS to (heavily) style a table layout, as the client will be carrying out future site amendments and I'm trying to make it as straightforward as possible :)

The problem I'm having is in controlling the default margins on some H3 tags which are also a link (basically there is a Sales page with product sub-headings, which the client wants to use as links to the main page for that product).

These H3 links can also have an <UL> tag attached in order that I can attach a small arrow image (so it appears to move/change colour as you mouse-over) via the list-style command

When I initially mouse-over on the page, there seems to be a delay in the CSS kicking in and you can see the H3 text adjusting from the default to "my" settings - this results in the text visibly moving when you first mouse-over. after that initial movement it seems to settle down.

Any ideas? I also sometimes get this with my CSS styled menu (which are basically a load of links with a background image applied so that they appear to be buttons)

Your thoughts would be greatly appreciated.
TIA
Mick

 
Sort by date Sort by votes
not sure if that's your problem, but it sounds like you need to preload the rollover image(s) (arrow image in this case, I believe)

-----
I'm unique, just like everyone else...
 
Upvote 0 Downvote
Some code would make it much easier to help, or a hyperlink. Please not that different browsers treat list items differently: IE will add a left-margin and Netscape's family will add a left-padding (or the other way around). Not sure if this is your problem, but it's hard to tell without any code.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
It's weird, I can see the H3 text rendering itself from the default margins to mine when I initially mouse-over - after that it's ok.

I'm pretty new to using CSS extensively so I hope you guys will bear with me on this

I've tried sorting out a stripped out version of my code and I can't even get that to work now. I know I'm doing something obviously wrong, but it's so obvious I can't see it!!!

CSS:
------------------------------
body {margin: 0px; background-color: White}
body, P, H1, H2, H3, H4, H5, H6, TD, DIV, OL, UL, DL {font-family: Arial, Helvetica, sans-serif}

a:link {FONT-WEIGHT: normal; COLOR: blue; font-size: 12px; TEXT-DECORATION: underline}
a:visited {FONT-WEIGHT: normal; COLOR: blue; font-size: 12px; TEXT-DECORATION: underline}
a:active {FONT-WEIGHT: normal; COLOR: blue; font-size: 12px; TEXT-DECORATION: underline}
a:hover {FONT-WEIGHT: normal; COLOR: green; font-size: 12px; TEXT-DECORATION: underline}

li {margin: 10px,0px,2px,0px; list-style-position: outside; list-style-image: url(images/arrow.gif)}

.maintext {font-size: 12px; font-weight: normal; color: black}

h3 {
font-size: 16px;
font-weight: bold;
color: red;
padding: 30px 0px 11px 20px
}

h3 ul li a {
font-size: 16px;
list-style-image:url(images/first-image.gif);
color: red;
}

h3 ul li a:hover {
list-style-image: url(images/second-image.gif);
color: yellow;
}
------------------------------

HTML:
------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>

<body>
<h3>
<ul>
<li>
<a href="#">H3 tag with a link</a>
</li>
</ul>
</h3>
</body>
</html>
------------------------------

Any help would be greatly appreciated
Mick
 
Upvote 0 Downvote
Maybe it doesn't like having a <ul> inside a <h3>? Try something like this:
Code: 
h3 a {
   padding-left: 10px; /* or however wide your image is */
   background: url(images/first-image.gif) center left no-repeat;
   color: red;
}

h3 a:hover {
   background: url(images/second-image.gif) center left no-repeat;
   color: yellow;
}
Now your markup can be nice and simple:
Code: 
<h3><a href="#">H3 tag with a link</a></h3>
You could also experiment along the lines of
Code: 
h3 a {
   display: list-item;
   list-style-image: url(images/first-image.gif);
   color: red;
}
but it may not be so cross-browser compatible. Either way you should avoid putting a whole <ul> in there just to get a single bullet point.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Many thanks, Chris - that's just the effect I was after.

Guess I couldn't see the wood for the trees!!!!

Regards
Mick
 
Upvote 0 Downvote
You're welcome. Something to bear in mind when seeking out the CSS wood amongst the many trees is this -

If you're adding HTML markup to your document purely to get a particular visual effect, you're probably doing it wrong! You should aim to keep your HTML as pure and semantic as possible, and leave it to the CSS to apply the visual styling.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

SitesMasstec
  • Locked
  • Question
Viewport meta tag x iframe
Replies
0
Views
157
SitesMasstec
SitesMasstec
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
699
PeDa
PeDa
lupidol
  • Locked
  • Question
What does a question mark (?) stands for in ancho tag ? 1
Replies
2
Views
431
lupidol
lupidol
pendle666
  • Locked
  • Question
Using CSS for the pre tag. white-space: pre-line not working in Chrome
Replies
4
Views
603
pendle666
pendle666
Everton1Blue
  • Locked
  • Question
Google reCaptcha problem
Replies
4
Views
239
Everton1Blue
Everton1Blue

Part and Inventory Search

Sponsor

Back
Top