• 0

Webkit giving me FITS!


Question

http://1stinsightcommunications.com/project-files/security-solutions/brian/

* Before you view, please note! *

I did not make the graphics, I am only converting this to HTML/CSS. That's it. It's not my design, so please do not critique it (I don't much care for it myself but I have no say in the matter).

Only pay attention to the header element ... the search bar in particular, look at it in Firefox then view it in Chrome or Safari. Disaster. What can I do here? I've added clears, floats, etc, all should be just fine, right?

Halp please :)

Link to comment
Share on other sites

15 answers to this question

Recommended Posts

  • 0

You could use javascript to detect for the presence of webkit and then apply the attribute.

Thanks for your reply, I could probably do this with Javascript, but I'm more interested in why this isn't working exactly. It's bothering me that it doesn't display correctly with what seems like (at least according to the rest of the browsers I've checked) valid code :)

Edit x2: here's the jQuery I popped out... but it doesn't appear to work?

jQuery.each(jQuery.browser, function(i) {
   if($.browser.webkit){
      $(".search form").css("margin-top","-24px");
   }else{
      $(".search form").css("margin-top","0px");
   }
 });

Link to comment
Share on other sites

  • 0

Your code seems a bit overkill for what you want to do. Try this:


if ($.browser.webkit)
{
$(".search > form").css("margin-top","-24px");
}

Note the browser.webkit flag is only available when using jQuery 1.4.

Also if you have problems getting the selector to work, add an ID to the form so you can just do #SearchForm or something. I generally find this fixes things when jQuery gets confused.

Link to comment
Share on other sites

  • 0

Tried it with both the one you posted and added an id (check the original link again), no dice :| Using jQuery 1.4.3

Link to comment
Share on other sites

  • 0

shouldn't it be :

$(".search > form").css({"margin-top" : "-24px"});

(I didn't check the doc lately but iirc you must feed an object as parameter)

Edit : you might have to put the form in relative positioning for the negative margin to work like this :

$(".search > form").css({"position" : "relative", "margin-top" : "-24px"});

Link to comment
Share on other sites

  • 0

shouldn't it be :

$(".search > form").css({"margin-top" : "-24px"});

(I didn't check the doc lately but iirc you must feed an object as parameter)

Made no difference, form element is still not receiving the margin-top parameter. Argh! lol

Link to comment
Share on other sites

  • 0

The problem isn't that, it's the element 'form' is not receiving any attribute at all. It's still the default:

height: 40px;
width: 276px;

Link to comment
Share on other sites

  • 0

err where is your JS code btw ? cause i just tried :

$(".search > form").css({"position" : "relative", "margin-top" : "-24px"});

in the console under chrome and it does move the form ?!

Link to comment
Share on other sites

  • 0

Ok i got it

it doesn't work because

<script> if ($.browser.webkit) { $("#searchForm").css("margin-top","-24px"); } </script>

is in your HEAD !

It should either be before closing the </body> tag OR

keep it in the head but do this :

&lt;script&gt;
$(document).ready(function () {

if ($.browser.webkit) { $("#searchForm").css("margin-top","-24px"); }


});
&lt;/script&gt;

And it should fix it no prob...

Edit : changed $(document).onload to ready() // My bad...

Link to comment
Share on other sites

  • 0

So you get the gig to what it was not working previously, your Jquery was trying to access a dom element that wasn't yet present (the form so to speak). That's why if you have to directly mod any dom element it's best practice to put all your scripts right before the </body> tag. Or if you want to keep your code "tidy" just use the $(document).ready method :), this later will make your code work wherever it is placed in your page and saves the hassle of knowing what should be loaded first.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.