4 replies [Last post]
Charlie
Charlie's picture
Offline
Regular
Last seen: 18 years 14 weeks ago
Joined: 2003-10-15
Posts: 16
Points: 0

Hi folks

I'am having problems with a CSS rollover effect, It work fine in Mozilla, Netscape and Opera, but in IE there is a problem (surprise surprise I hear you say).

If you take a look at this page http://homepage.ntlworld.com/claw_23/. In the first paragraph is a link called key achievments. When the pointer is over it in IE, the surrounding line and the line above shift to the left very slightly. Whilst this is not a major problem it is very annoying.

When the background-color on the a:hover is removed there is no problem, however I want to keep this effect. Does the a:hover take up extra space?

The CSS can be viewed herehttp://homepage.ntlworld.com/claw_23/styles/cv.css

Cheers.[/url]

Charlie
Charlie's picture
Offline
Regular
Last seen: 18 years 14 weeks ago
Joined: 2003-10-15
Posts: 16
Points: 0

Rollover on link causes paragraph to *beep* left

:oops:

The title was meant to read,

Rollover on link causes paragraph to shift left

crazybat
crazybat's picture
Offline
Enthusiast
Surrey, British Columbia, Canada
Last seen: 13 years 7 weeks ago
Surrey, British Columbia, Canada
Joined: 2004-08-17
Posts: 58
Points: 0

Rollover on link causes paragraph to *beep* left

Hey Charlie.

Change this on your CSS;

/** Honours Details Styles **/
	#honoursContainer, 
	#HNDContainer,
	#NCContainer,
	#SchoolContainer,
	#BTContainer,
	#SkyContainer,
	#AMECContainer,
	#VariedContainer
		{
		border:solid 1px #fbf5e3; 
		/*Changed*/
		margin: 0;
		}

.
.
.

/** Pad Details about me **/		
	 #DetailsAbout p,
	 #perPro
	 {
	 /*changed*/
	 margin: 0 4% 0 4%;
	 }

.
.
.

/* Holly hack. positioniseverything.net
/* Hide from IE5-mac. Only IE-win sees this. \*/
* html #content,
* html #footer,
* html div {
  height: 1%;
}

I didn't get that crazy shifting on IE 6.0 (PC) but testing will be required on the other browsers as I only have access to the one at this time.

I would also look at using some sort of '#container' ID to hold all of your content. I find it easier then to control the content inside, but that's up to you of course Smile

Cheers!

cb

Crazy Bat Designs
Home of the phpBB WASO
Helping You Reach The MOST People Possible.

Charlie
Charlie's picture
Offline
Regular
Last seen: 18 years 14 weeks ago
Joined: 2003-10-15
Posts: 16
Points: 0

Rollover on link causes paragraph to *beep* left

Spot on CrazyBat, It works fine in all browsers.

I had considered placing most content within container divs, but I'am trying to keep unnecessary markup to a minimal.

Could you explain to me why the shifting to the side happened, is there some sort of preference over using margins and padding which will make the rest of the paragraph move when using a CSS rollover.

Thanks again, Charlie.

crazybat
crazybat's picture
Offline
Enthusiast
Surrey, British Columbia, Canada
Last seen: 13 years 7 weeks ago
Surrey, British Columbia, Canada
Joined: 2004-08-17
Posts: 58
Points: 0

Rollover on link causes paragraph to *beep* left

Hey Charlie.

I believe it has to do with the percentage width you have defined as part of the #mainbody id as well as the other percentage values indicated in other id's and classes.

I'm thinking IE is trying to calculate things as you perform the mouseovers on the document, but honestly, this is just my best guess.

With the other percentage values you had for padding, it looked as though IE was compensating in some way. But, I will be completely honest with you and say 'I do not know for sure' Smile

So...if someone does know, please share your thoughts Smile

Cheers! cb.

Crazy Bat Designs
Home of the phpBB WASO
Helping You Reach The MOST People Possible.