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 Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Fieldsets in IE & FF gripe

Status
Not open for further replies.
g0ste

g0ste

Technical User
Feb 16, 2003
95
AU
Hello,

I am using a base stylesheet for Firefox, and using conditional comments to determine which stylesheet to use for IE browsers - < IE7 and IE7 stylesheets.

I am running a fieldset on some of the pages, however if I insert the code in the Firefox stylesheet;

Code: 
fieldset{
  -moz-border-radius: 8px;
  border: 1px solid #CFCFC5;
}

to force Firefox to render the fieldset corners smooth (without the [tt]border[/tt] property, there is no topline and the corners are misaligned).

However, because this is the main stylesheet, it seems to be loaded aswell, not only the IE specific stylesheets get loaded. So because the [tt]border[/tt] property has been messed with, IE6 & 7 now display the fieldset as sqaured corners.

Anyone care to enlighten me on how to make both versions (IE & FF) of the fieldset appear rounded?

Thanks for your time :>
 
Sort by date Sort by votes
Hello Chris,

Thanks for your swift reply.

This is the [tt]head[/tt] from one of the pages using the [tt]fieldset[/tt]:

Code: 
<head>
  <link rel="stylesheet" href="main2.css" type="text/css" />
  <!--[if IE 7]>
  <link rel="stylesheet" type="text/css" href="main_ie.css" />
  <![endif]-->
  <!--[if lt IE 7]>
  <link rel="stylesheet" type="text/css" href="main.css" />
  <![endif]-->
  <title>website.com - insert clichéd slogan here</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
</head>

that should load main2.css straight away. Then if it is IE7 load main_ie.css and if it is less than IE7 load main.css. I think it is what you descibed above. Please do correct me if I am wrong :>

 
Upvote 0 Downvote
You are correct, but we cannot determine what is not working for you. As you know, the -moz- property will not work outside the Gecko browsers, so your 1px boxed border will be inherited from your main stylesheet. I do not know how you're producing the rounded corners on IEs, but if it does not involve the border property, then you can add [tt]border: none;[/tt] to the IE stylesheets to simply turn off the border again. If you're already doing this, or your problem stems from some other thing, please show us your code.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
Vragabond,

Unfortunately, inserting the [tt]border: none;[/tt] in the IE stylesheets removes the [tt]fieldset[/tt] border entirely.

My problem lies with the default stylesheet for Firefox being loaded, and overwriting the IE stylesheets. As far as I know, the browser will load all the stylesheets it can. Just that with the IE stylesheet, I cannot put anything to override the Firefox stylesheet - because anything that involves [tt]border[/tt] in the [tt]fieldset[/tt] attribute will break it.

I guess I will stick with squared corners, unless someone has a solution.

And my code is not relevant here. It's just when you mix the two, it kinda gives a catch 22 situation. If I targetted Firefox users specifically, I would not have a problem. If I targetted IE users, I would not have a problem. Just when I want to target them both, I have a problem :<

I was hoping someone might have encountered this problem before.

________________________________
Top 10 reasons to procrastinate:
1)
 
Upvote 0 Downvote
And my code is not relevant here.
Click to expand...
It is if you want help.

You've told us what you've got in the main stylesheet, you've told us how you're linking the stylesheets in your html, but you've not told us what you're sending to IE.

You want us to tell you how to stop the IE rules from conflicting with the main ones, but you haven't told us what those IE rules are. You'll get better answers if people don't have to guess at the problem.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Now I get what you mean. You're trying to say that unless you dabble with the styles, IE in Windows XP (or Vista probably) will apply custom rounded corners to your form elements. If you do put any styling on the form elements, then this default IE style disappears. You can observe who will be seeing this default IE effect on this page:
If this is so important to you, you could find a hack here that hides the declaration from all the IEs.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
I think this will do what you want... a combination of the child selector with a comment in the middle:
Code: 
<html>
<head>
	<style type="text/css">
		form>/**/fieldset {
			-moz-border-radius: 8px;
			border: 1px solid #CFCFC5;
		}
	</style>
</head>
<body>
	<form action="">
		<fieldset>
			<input type="text" value=""/>
		</fieldset>
	</form>
</body>
</html>
Lemme know how it goes!

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch
[/tt]

What is Javascript? FAQ216-6094
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
774
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
717
PeDa
PeDa
pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
170
pendle666
pendle666

Part and Inventory Search

Sponsor

Back
Top