SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 28
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    form input text field ff and chrome diff. render

    Hi css experts,
    I'm using form with css like following
    HTML Code:
    <div id="live_search">
        <form method="get" id="livesearchform" action="#"> 
             <label class="livesearch_label">Enter query </label> 
             <input type="text" onkeyup="lookup(this.value);" onblur="fill();" id="inputString"  />
    				
    	<div class="" id="autoSuggestionsList">&nbsp;</div>
    				
        </form>			
    </div>
    My css file look like this
    HTML Code:
    #live_search #livesearchform #inputString,#livesearch_form #livesearchform #ps{
    	width:274px;
    	height:36px;
    	background:left no-repeat url('../_images/live_search_bkd.jpg');
    	border:0px;
    	padding:0px 10px;
    	/*padding:0px 0px;*/
    	margin:0px 0px 0 170px; 
    	color:white; 
    	/* styles in template_style.css */
    	}
    #live_search #livesearchform#livesearchsubmit{
    	position:absolute;
    	top:0px;
    	right:0px;
    	width:245px;
    	height:26px;
    	background:left no-repeat url('../_images/login_bt.jpg');
    	border:0px;
    	cursor:pointer;
    	}
    #live_search label.livesearch_label{
    	font-size:18px;
    	position:absolute;
    	left:0px;
    	top:6px;
    	color:white; 
    }
    
    #live_search under_label.livesearch_underlabel{
    	font-size:10px;
    	position:absolute;
    	left:0px;
    	top:6px;
    	color:gray; 
    }	
    Now as you can see from above I'm using live_search_bkd.jpg as background for input field. Chrome render this field perfectly, but I have problem on ff. Firefox shows this input field with one line above background image.
    how can I solve this ?

    Regards,

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Unable to test right now but have you reset all the margins on the elements?
    *{margin:0;}
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi, it's hard to see what you're seeing without the images.

    However, your background shorthand syntax isn't quite right - the order of the properties is
    background-color background-image background-repeat background-attachment background-position
    e.g.

    Code css:
    background: transparent url(../_images/login_bt.jpg) no-repeat top left;

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I'm going to go a bit offtopic and say the form also happens to be invalid and the label needs a "for" attribute to match the id of the text input. And the CSS is waaaay heavier than you need. You really don't need #longidname #anotherlongidname #anotherelement .class {something} because it'll make your code hard to read and harder for your to debug.

    Just my 2 cents : )

  5. #5
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tested locally, Chrome had the same problem on my machine, as did Opera.

    Anyways, resetting the margins and padding for all our friends seems to line the "enter query" and background image on #live_search #livesearchform #inputString,#livesearch_form #livesearchform #ps up.

    Tested locally in FF, Opera, Safari, Chrome, IE6, IE7 and IE8

    Code CSS:
    * {
    margin:0;
    padding:0;
    }
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  6. #6
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    And the CSS is waaaay heavier than you need. You really don't need #longidname #anotherlongidname #anotherelement .class {something} because it'll make your code hard to read and harder for your to debug.

    Just my 2 cents : )
    I agree, the specificity weight is to heavy.

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Anyways, resetting the margins and padding for all our friends seems to line the "enter query" and background image on #live_search #livesearchform #inputString,#livesearch_form #livesearchform #ps up.
    I am strongly against removing padding from everything using the * selector and especially when it comes to forms.

    If there's padding on the form itself, it's safe enough to remove it, but not the submit for example.

  8. #8
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    I am strongly against removing padding from everything using the * selector and especially when it comes to forms.

    If there's padding on the form itself, it's safe enough to remove it, but not the submit for example.
    So am i, but using the universal selector would show the OP what's going on, so he can use his own method to reset

    Edit:

    I should have told the OP that, i guess.... But hey, it's Sunday, even for me lol
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  9. #9
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Thought it was margins . I was right..

    True it does affect performance..but the noticability (butchered that spelling) is not likely.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #11
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Thought it was margins . I was right..

    True it does affect performance..but the noticability (butchered that spelling) is not likely.
    Performance problems would only likely to be on large sites because the selector would have to go over every element, but it can happen.

    Didn't noticed your reply buddy, otherwise i would have kept my yap shut lol

    Anyways, as i see it the OP can decide to go with the universal selector or reset along the way and only on the elements he uses
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Luki, it's fine lol.

    Performance problems, even on a very large site would probably still not be very noticable.

    The page in question would have to be humongous but then you'd have to ask yourself, is having a page that big really a good idea? If it's a results page you could use pagination or if it's just a regular page cut up the content into sections for the user to read. Studies have shown (don't ask me to quote one because I can't lol), I think, that longer pages tend to have users exit your site. THey want an answer and they don't want to read all day to find it.

    I might be rambling now so I'll stop
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  13. #13
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Luki, it's fine lol.

    Performance problems, even on a very large site would probably still not be very noticable.

    The page in question would have to be humongous but then you'd have to ask yourself, is having a page that big really a good idea? If it's a results page you could use pagination or if it's just a regular page cut up the content into sections for the user to read. Studies have shown (don't ask me to quote one because I can't lol), I think, that longer pages tend to have users exit your site. THey want an answer and they don't want to read all day to find it.

    I might be rambling now so I'll stop
    I fully agree buddy. It's like those css compression discussions to save loading time. The milliseconds they save are for a user hardly noticeable (maybe if he's on a medieval connection, it does lol).

    And no, you're not rambling about those studies. I'f i'm not mistaken it's about 15 seconds a user spends searching for the relevant info. And the info has to be above the fold....

    Now, I'M starting to ramble for sure lol
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  14. #14
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Performance problems, even on a very large site would probably still not be very noticable.
    "It’s clear that CSS selectors with a key selector that matches many elements can noticeably slow down web pages. The key is focusing on CSS selectors with a wide-matching key selector. This becomes even more important for Web 2.0 applications where the number of DOM elements, CSS rules, and page reflows are even higher."

    I'm curious if anyone (zcorpan/paul) has set up test cases?

  15. #15
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    "It’s clear that CSS selectors with a key selector that matches many elements can noticeably slow down web pages. The key is focusing on CSS selectors with a wide-matching key selector. This becomes even more important for Web 2.0 applications where the number of DOM elements, CSS rules, and page reflows are even higher."

    I'm curious if anyone (zcorpan/paul) has set up test cases?
    I don't think that there are actual figures to back that statement up: the fact that they can slow down a page is a logical deduction but what is 'noticeably' ? 1 second, 30 seconds, 1 minute...? And is 'noticeably' meant for dial up users, broadband users...?

    When we (=web page designers, - developers) usually say that something slows a page down, it's because we use common sense but mostly it's not backed up with figures

    'You should use sprites for your nav' "Why?"
    "Each one of those images is a separate HTTP-Request, and the more of those, the less efficient your page is."
    'Makes sense but you have figures?'
    "Erhm, no but you can do a google"


    (the above is not invented but a discussion i had on a different list)

    What i want to make clear is that our gut instinct tells us that it _could_ slow down a page but not how much and if it's worth trying some method involving more mark up or 'high tec' technique
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  16. #16
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Luki_be View Post
    I don't think that there are actual figures to back that statement up: the fact that they can slow down a page is a logical deduction but what is 'noticeably' ? 1 second, 30 seconds, 1 minute...? And is 'noticeably' meant for dial up users, broadband users...?
    'Load time difference for universal selector'
    http://www.stevesouders.com/blog/200...css-selectors/

    Quote Originally Posted by Luki_be View Post
    When we (=web page designers, - developers) usually say that something slows a page down, it's because we use common sense but mostly it's not backed up with figures
    Common sense often derives from various test cases that have been conducted in some form or another.

    Quote Originally Posted by Luki_be View Post
    'Makes sense but you have figures?'

    (the above is not invented but a discussion i had on a different list)
    Figures, what do you mean ?

    Quote Originally Posted by Luki_be View Post
    What i want to make clear is that our gut instinct tells us that it _could_ slow down a page but not how much and if it's worth trying some method involving more mark up or 'high tec' technique
    Every ms counts

  17. #17
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    'Load time difference for universal selector'
    http://www.stevesouders.com/blog/200...css-selectors/

    Common sense often derives from various test cases that have been conducted in some form or another.


    Figures, what do you mean ?


    Every ms counts
    Hey, great link :-)

    8 seconds delay in IE6, FF, Chrome, Safari all way under 2 seconds. To bad the graph jumps from 0 to 2000 ms so i can't do an accurate estimate on safari and chrome (less the 1 second???)

    common sense: not always
    figures: numbers
    ms: subjective
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  18. #18
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Luki_be View Post
    Hey, great link :-)

    8 seconds delay in IE6, FF, Chrome, Safari all way under 2 seconds. To bad the graph jumps from 0 to 2000 ms so i can't do an accurate estimate on safari and chrome (less the 1 second???)
    http://stevesouders.com/efws/css-sel.../universal.php

  19. #19
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, testing material

    opera: page load time: 828 ms, reflow 0
    safari: page load time: 808 ms, reflow 1
    chrome: page load time: 931 ms, reflow 1
    FF: page load time: 1134 ms, reflow 793
    IE6: page load time: 2187 ms, reflow 1734
    IE7: page load time: 2656 ms, reflow 2000
    IE8; page load time: 250 ms, reflow 62

    Our good friends IE are a bit slow but i'm wondering if a user in the real world would notice the 'big' difference. For me, loading and reflow was not that heavy.... but i guess that's something subjective
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  20. #20
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I doubt they would notice..not everyone stares at their computer screen avidly while they wait for a page to load. They mess with other open tabs or other open programs.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  21. #21
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Luki_be View Post
    Ah, testing material

    opera: page load time: 828 ms, reflow 0
    safari: page load time: 808 ms, reflow 1
    chrome: page load time: 931 ms, reflow 1
    FF: page load time: 1134 ms, reflow 793
    IE6: page load time: 2187 ms, reflow 1734
    IE7: page load time: 2656 ms, reflow 2000
    IE8; page load time: 250 ms, reflow 62

    Our good friends IE are a bit slow but i'm wondering if a user in the real world would notice the 'big' difference. For me, loading and reflow was not that heavy.... but i guess that's something subjective
    It all depends on the scale of the site.

    FYI:
    http://stevesouders.com/efws/css-sel.../csscreate.php
    *Pretty Neat

  22. #22
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    I doubt they would notice..not everyone stares at their computer screen avidly while they wait for a page to load. They mess with other open tabs or other open programs.
    Most are not so fanatic lol

    (= high five) lol
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  23. #23
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    It all depends on the scale of the site.

    FYI:
    http://stevesouders.com/efws/css-sel.../csscreate.php
    *Pretty Neat
    That's what i stated in my earlier reply:

    Performance problems would only likely to be on large sites because the selector would have to go over every element, but it can happen.

    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  24. #24
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Luki_be View Post
    That's what i stated in my earlier reply:

    Performance problems would only likely to be on large sites because the selector would have to go over every element, but it can happen.

    I don't think that there are actual figures to back that statement up:
    Wanted to give you some actual figures

  25. #25
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I still start off with
    * {margin: 0;}

    but thats because it saves ME a lot of time... all those margin: 0's I don't need to write for everything else : )


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •