Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts

    SOS (asap) - added image - for some browser it doesn't work

    Please take a look at this site.
    I have added the following code in the header:

    Code:
        <img class="bunny" src="http://glamourina.pl/uploads/easter_bunny.png" />
    here the full code:
    Code:
    <header>
    	<div id="logo_holder">
        <img class="bunny" src="http://glamourina.pl/uploads/easter_bunny.png" />
    			<div id="h1">
    			<a href="http://glamourina.pl/" title="Blog o modzie">GLAMOURINA<br /></a><h1><a href="http://glamourina.pl/" title="Blog o modzie"><span class="logolittlefont">BLOG O MODZIE</span></a></h1><h2><a href="http://glamourina.pl/" title="Blog o modzie"><span class="logoverylittlefont">ROZWÓJ OSOBISTY</span></a></h2>
    			</div>
    	</div>

    here the css:
    Code:
    .bunny{
    	position:fixed;
    	height:70px;
    	margin-left:300px;
    	margin-top:20px;
    	z-index:99;
    	}

    In one of my computers it looks like this:


    Also in IE9 it works fine. In FF17 it works bad - as above, black line and the bunny is on the left.

    But it should looke like this:


    And this actually how I see it on Chrome 25.0.

    Please help. Why some browsers see it in a completely different and wrong way?
    Attached Thumbnails Attached Thumbnails SOS (asap) - added image - for some browser it doesn't work-1.jpg   SOS (asap) - added image - for some browser it doesn't work-2.png  

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    looks fine on ff 19 ( current version) and chrome 25.0.1364.172, and amazingly IE8.

  • Users who have thanked DanInMa for this post:

    utnalove (03-27-2013)

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    I think you want position:absolute rather than position:fixed - currently the image stays put as the rest of the header scrolls off the top of the screen.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    utnalove (03-27-2013)

  • #4
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts
    OK, yes, the position absolute works fine... however I still don't know why on FF 17 and on another chrome it shows a black line.... it looks like there is something wrong somewhere....
    Last edited by utnalove; 03-27-2013 at 09:11 PM.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello utnalove,
    Don't position absolute elements with margin.
    Your <header> or #logo_holder should be relative, your bunny should be absolute and you need to specify top and left coordinates.

    See a basic positioning tutorial here that may help.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    utnalove (03-27-2013)

  • #6
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Excavator View Post
    Hello utnalove,
    Don't position absolute elements with margin.
    Your <header> or #logo_holder should be relative, your bunny should be absolute and you need to specify top and left coordinates.

    See a basic positioning tutorial here that may help.

    Does it mean that I have to position the .bunny with something like

    Code:
    left:***px;
    top:***px;
    instead than:

    Code:
    	margin-left:300px;
    	margin-top:20px;
    ?

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Yes, exactly.
    Just a personal preference, I always go clockwise - top,right,bottom,left

    Following that would make your example look more like this -
    Code:
    top:***px;
    left:***px;
    Be sure you have relative element for your absolute element to base those top/left measurements on.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    utnalove (03-27-2013)

  • #8
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts
    hmmm how do I check if I have a valid relative?

    my logo holder is:
    Code:
    #logo_holder{width:960px;background:#000;margin:0 auto;display:block;}
    should I add "position:relative" to the above? If yes I can see the logo text goes down a few px. It still looks fine. should I do that?
    Last edited by utnalove; 03-27-2013 at 09:46 PM.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by utnalove View Post
    hmmm how do I check if I have a valid relative?
    There's not really a check for a valid relative. You just need to know which element is relative so you know what you're positioning your absolute off of. I suggested <header> or #logo_holder because those are parents of the element you want to position.

    :absolute - The element is positioned relative to its first positioned (not static) ancestor element
    see http://www.w3schools.com/cssref/pr_class_position.asp
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    utnalove (03-27-2013)

  • #10
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts
    So if I understand well it works like this:
    if I put absolute and it's inside a relative, it will be positioned according to the relative position.

    If there is not a relative in the upper level of the absolute, it will be positioned according to the top/left/bottom/right of the page/site or maybe body?

    Did I understand it correctly?

  • #11
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by utnalove View Post
    So if I understand well it works like this:
    if I put absolute and it's inside a relative, it will be positioned according to the relative position.

    If there is not a relative in the upper level of the absolute, it will be positioned according to the top/left/bottom/right of the page/site or maybe body?

    Did I understand it correctly?
    Yes.

    When used with position:relative the position:absolute allows you to position something that will stay in the same position relative to that content (useful for when you want something to always overlay something else in the same way - as you do with your image).

    When used without position:relative the position:absolute will effectively be relative to the top left of the page and will therefore not necessarily be placed relative to anything else in the page as it will be independent of how the rest of the page is laid out (useful for things you are going to animate with JavaScript).
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    utnalove (03-27-2013)

  • #12
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts
    thanks much for your help.
    I did it as you said and it looks like everything is ok

  • #13
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts, Tallon IV, W-Class
    Posts
    285
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Blog Entries
    3
    I wouldn't suggest fixed position at all, you should definitely use relative with the 'float' property and percentages for your elements.
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.


  •  

    Posting Permissions

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