15 replies [Last post]
aikanaro
Offline
Enthusiast
Last seen: 15 years 16 weeks ago
Joined: 2006-06-28
Posts: 78
Points: 0

Hi everyone

Is there a way to target Opera and/or Firefox specifically without Javascript when writing CSS rules?

Thanks in advance.

"Mr. Hunt, this isn't mission difficult, it's mission impossible. "Difficult" should be a walk in the park for you." - Anthony Hopkins in Mission Impossible II

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 20 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Why? To what purpose do you

Why?
To what purpose do you need to do this.

FF and Opera pretty much get things correct, if anything needs filtering it's IE. Rules can be hidden from IE6 using the child selector '>'

You may need to be more specific as to what you are trying to do.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

aikanaro
Offline
Enthusiast
Last seen: 15 years 16 weeks ago
Joined: 2006-06-28
Posts: 78
Points: 0

It's perfectionism but I

It's perfectionism but I have a page in which some elements aren't equally placed in FF and Opera. They differ about 2 or 3 px. I would like to even things out hence the reason I asked for FF and/or Opera specific comments. If it's possible at all of course. As for IE6...whenever I need to set things that look different from FF or Opera I just use the star html hack.

"Mr. Hunt, this isn't mission difficult, it's mission impossible. "Difficult" should be a walk in the park for you." - Anthony Hopkins in Mission Impossible II

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 32 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

A look at your code might

A look at your code might help us suggest ways around your problem without using hacks, but assuming that hacks are your only option, there are ways to target different versions of Opera: http://www.fu2k.org/alex/css/hacks/fuzzyspecificity

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

aikanaro
Offline
Enthusiast
Last seen: 15 years 16 weeks ago
Joined: 2006-06-28
Posts: 78
Points: 0

Thanks for the tips.

Thanks for the tips. Unfortunately I can't post my code. At least not yet. But thanks anyway.

"Mr. Hunt, this isn't mission difficult, it's mission impossible. "Difficult" should be a walk in the park for you." - Anthony Hopkins in Mission Impossible II

aikanaro
Offline
Enthusiast
Last seen: 15 years 16 weeks ago
Joined: 2006-06-28
Posts: 78
Points: 0

Even though I now refer to a

Even though I now refer to a different piece of code the problem remains. I have a float that is positioned diferently whether you see the page using Opera 9, FF or IE6. Regarding FF and IE6 I can define the css rule so that things end up where I want them. Now if we talk Opera 9 things aren't so clear. The A element inside the form gets positioned much different from FF and IE6.

I'll post my code below and hope that someone can help me understand what's happening.

XHTML (validated against W3C Validator):

[form action="./homepage.html" method="get"]
   [fieldset]
      [legend]bla bla[/legend]
      [label for="searchField"]bla bla bla[/label]
      [input type="text" id="searchField" size="15" value="Insert here..." title="Insert here..." /]
      [label for="searchSubmit" id="searchSubmitLabel"]bla bla[/label]
      [input type="submit" id="searchSubmit" value="Buh" title="Buh" /]
      [label for="screenSearchSubmit" id="screenSearchSubmitLabel"]bla bla[/label]
      [input type="image" src="images/arrow.gif" id="screenSearchSubmit" alt="buh" title="buh" /]
      [a href="./homepage.html?1"]GRIF[/a]
   [/fieldset]
[/form]

My corresponding CSS rules for A element only:

body#homepage div#header form fieldset a {
	/* background */
	background: transparent url(../images/arrow.gif) no-repeat 100% 80%;
	/* dimensions */
	line-height: 17px;
	width: 133px;
	/* display */
	display: block;
	/* float */
	float: right;
	/* font & text */
	color: Black;
	font-size: 1.0em;
	font-weight: bold;
	text-decoration: underline;
	/* margin & padding */
	margin: -18px 2px 0 0;
	padding-right: 20px;
	
/*	border: 1px solid Green;*/
}

If you need additional info just say so.

Thanks in advance to anyone who might read this post and/or contribute with any ideas/solutions.

P.S: I had to change < and > for [ and ] respectively because they were getting clipped out.

"Mr. Hunt, this isn't mission difficult, it's mission impossible. "Difficult" should be a walk in the park for you." - Anthony Hopkins in Mission Impossible II

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 20 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Could you explain what the

Could you explain what the problem is seeing as we only have code snippet to view, an explanation of the actual problem as perceived is generally expected and helpful.

But first please explain why you have used a negative top margin on the anchor element and then we'll explain the first of the misunderstandings about the properties that I think is occurring here.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

aikanaro
Offline
Enthusiast
Last seen: 15 years 16 weeks ago
Joined: 2006-06-28
Posts: 78
Points: 0

I need to style that form so

I need to style that form so that every element contained whithin it is displayed horizontally. The A element was declared as float because I couldn't control it's height and as such it's image was noticeably clipped (the top rows weren't being displayed). After that I set all margins to zero so that I could see where was it positioned. That's the reason for the negative top margin. It was positioned below the other elements and I needed to pull it up. Only in Opera 9 was it positioned next to the other elements.

P.S: I did try to use line-height on the anchor but to no avail.

"Mr. Hunt, this isn't mission difficult, it's mission impossible. "Difficult" should be a walk in the park for you." - Anthony Hopkins in Mission Impossible II

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 32 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

My immediate question would

My immediate question would be: why do you have an anchor in your form? You're not using it to submit the form are you?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

aikanaro
Offline
Enthusiast
Last seen: 15 years 16 weeks ago
Joined: 2006-06-28
Posts: 78
Points: 0

No. That form is a search

No. That form is a search form. The anchor links to a different page where an advanced search will be available.

"Mr. Hunt, this isn't mission difficult, it's mission impossible. "Difficult" should be a walk in the park for you." - Anthony Hopkins in Mission Impossible II

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 12 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

I think you got the MSFT

I think you got the MSFT Syndrome, adding patch on top of patch. Simply removing most of the style rules made for very similar renderings in Firefox, IE and Opera9.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type"
        content="text/html; charset=UTF8" />

  <title>Form Test</title>

<style type="text/css">

fieldset {
    padding: 10px;
    }


fieldset a {
    color: black;
    font-size: 1.0em;
    font-weight: bold;
    text-decoration: underline;
    }
	
</style>
</head>

<body>
<form action="./homepage.html" method="get">
   <fieldset>
      <legend>bla bla</legend>
      <label for="searchField">first</label>
      <input type="text" id="searchField" size="15" value="Insert here..." title="Insert here..." />
      <label for="searchSubmit" id="searchSubmitLabel">second</label>
      <input type="submit" id="searchSubmit" value="Buh" title="Buh" />
      <label for="screenSearchSubmit" id="screenSearchSubmitLabel">third</label>
      <input type="image" src="images/arrow.gif" id="screenSearchSubmit" alt="buh" title="buh" />
      <a href="./homepage.html?1">GRIF</a>
   </fieldset>
</form>
</body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

aikanaro
Offline
Enthusiast
Last seen: 15 years 16 weeks ago
Joined: 2006-06-28
Posts: 78
Points: 0

I'm sorry but do you mean

I'm sorry but do you mean that I simply have too much CSS declarations? I'm asking because I've re-checked my css and it doesn't seem to be the case.

"Mr. Hunt, this isn't mission difficult, it's mission impossible. "Difficult" should be a walk in the park for you." - Anthony Hopkins in Mission Impossible II

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 20 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

No, Gary is refering to the

Yes & no, Gary is refering to a degree that the rules seem overworked and when simplified work better cross browser but in another sense to the common error in seeing a problem with a layout and instead of finding the reason one applies a patch to counteract that perceived issue. This can and will have a snowball effect to the point that a layout and it's CSS rules are unGovernable.

As an example (hypothetical) one wants element B to abut element A which sits above it but despite zeroing the top and bottom margins of each the gap will not close, so in desperation a negative offset top is applied top:-20px to try and force the gap to close and it seems to work; problem solved? or is it? the negative offset property will have ramifications further on through the layout , perhaps not critical, that depends.

What should have been examined was why that gap persisted and elements removed from the markup to simplfy the layout in fact the 'p' element that sat first in the flow of element B was collapsing margins with it's parent ( correctly) and forcing the gap; thus controlling the margins of the 'p' either setting them to zero or preventing the element B from collapsing it's margin sorts the problem out and in the correct manner. Negative offset can be removed and many further problems will likely cease to exist.

The exhibited problem was not in fact a problem but a consequence of correct CSS property behaviour to try and correct that problem with the wrong approach through lack of understanding of how properties are meant to act will cause compound problems that have a knock on effect and that you are always attempting to fix with yet another fix for a problem that didn't really exist in the first place.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

aikanaro
Offline
Enthusiast
Last seen: 15 years 16 weeks ago
Joined: 2006-06-28
Posts: 78
Points: 0

Thanks...I thing I got the

Thanks...I thing I got the idea. I'll look into it having that idea in mind.

"Mr. Hunt, this isn't mission difficult, it's mission impossible. "Difficult" should be a walk in the park for you." - Anthony Hopkins in Mission Impossible II

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 12 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

aikanaro wrote:I'm sorry but

aikanaro wrote:
I'm sorry but do you mean that I simply have too much CSS declarations? I'm asking because I've re-checked my css and it doesn't seem to be the case.

Yeah, more or less. Did you try the code I gave you? As is, it gives very much alike renderings in Firefox, IE and Opera.

Hugo's clarification pointed out that trying to modify browser renderings piecemeal, without getting to the root cause of the initial problem, creates an unstable mish-mash that end up causing other problems.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

aikanaro
Offline
Enthusiast
Last seen: 15 years 16 weeks ago
Joined: 2006-06-28
Posts: 78
Points: 0

Hi everyone I'm picking

Hi everyone

I'm picking this subject up again because I've once again faced the same problem.

I'm working on a different site now. And this time I've avoided (almost completely so far) to declare any browser specific rule. I don't have many "breathing room" in terms of graphical layout as it was designed by a graphical designer on the client's request.

Now I have this form which I am supposed to style to look like the attached image (with resize capability). I've come up with a way using the XHTML markup and CSS rules I'll be posting in the end. My problem's the same, Opera and FF are differently positioning the submit image and it would be very good to have it equally placed in both of them. Can anyone help me with this?

XHTML markup:



Campo de pesquisa
Caixa de pesquisa

Pesquisar

Pesquisar

Pesquisa avan├žada? Clique aqui




as for the CSS rules:

form fieldset legend,
div#navigation form fieldset label,
div#navigation form fieldset input#searchTextSubmit {
display: none;
}

div#navigation form fieldset input {
margin-left: 12px;
margin-top: 9px;
width: 10em;
}

div#navigation form fieldset input#searchGraphicSubmit {
float: right;
height: 38px;
margin-top: -27px;
width: 33px;

border: 1px solid black;
}

div#navigation form fieldset p {
clear: both;
line-height: 2.3em;
margin-top: 0;
text-align: center;

border: 1px solid blue;
}

form fieldset label {
font-size: 1.1em;
font-weight: bold;
}

form fieldset input {
font-size: 1.2em;
}

form fieldset p {
font-family: Tahoma;
font-size: 0.9em;
}

form fieldset p a {
font-family: Tahoma;
font-weight: bold;
}

form fieldset {
border: none;
}

The coloured borders are there for visual guide help. They're not supposed to be there in the final version. I've separated my rules according to content (i.e. layout, typography, etc) hence the repeated declarations.

As always thanks to anyone who might contribute with something.

AttachmentSize
output.jpg 34.6 KB

"Mr. Hunt, this isn't mission difficult, it's mission impossible. "Difficult" should be a walk in the park for you." - Anthony Hopkins in Mission Impossible II