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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Title can't exist without image?

    Hello everyone. I'm a little confused on this tumblr layout that I'm working on for a friend.

    http://spacecamppresents.tumblr.com

    If you view this in Safari, IE, or Chrome, the title: "SPACE CAMP PRESENTS" is present, but unfortunately if you view it in Firefox, it isn't there.

    I was actually having problems with this layout because the title on top can only be seen if there is an image by it, but if I delete it, the title just disappears somewhere. I'm assuming it exists, I just don't know how to get it back. So then I thought, oh maybe I should just put the image back but just hide the visibility. And it worked! Until I viewed it in firefox. The title doesn't show up, but the blog itself pulled up a lot to cover the small clock on the upper right.

    I was wondering is this like a margin or padding issue? Because I took out the image, which is like a puzzle to the whole layout, that the title doesn't know where to go? How can I fix this?

    Thanks
    Tiffany.
    Last edited by tiffalinglee; 08-09-2012 at 10:43 AM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Add a position:relative; z-index:10; to .header .heading to bring it above some other elements that hide it.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks! It brought it to the front like you said. I was able to position using top and left. What I don't really understand is that if I try to move any of the contents in fire fox,then browsers like safari and IE will exaggerate the move a lot more. So right now there's a giant space above the title for Safari/IE. Do you know how would I go about editing the code so I can eliminate that space but not effect firefox's position?

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by tiffalinglee View Post
    Do you know how would I go about editing the code so I can eliminate that space but not effect firefox's position?
    The problem is the following code:

    Code:
    <p id="hope">
    <img src= ''height='200px', width=' 200px' />
    </p>
    Code:
    #hope
    {
    visibility:hidden;
    }
    The above HTML code has syntax errors:
    • The src attribute doesn't refer to a valid image resource.
    • The src and height attributes are missing the required separator space.
    • The height attribute has an extraneous comma after it.
    • The height and width attributes do not contain integer values. (Values cannot end with "px".)

    All of the browsers I tested (Google Chrome 22, Mozilla Firefox 17, Opera 12.5, and Windows Internet Explorer 9) follow the rules for HTML5 and repair your code to the following:

    Code:
    <img src="" height="200px" ,="" width=" 200px">
    Per HTML5 parsing rules, your invalid 200px values are further fixed by being interpreted as 200 (which is a valid value).

    So you have a 200×200-pixel image in a p element with visibility: hidden that refers to an invalid image resource. ("" as a URL refers back to the document itself; HTML documents are not valid images.) visibility: hidden hides the image and the p element that contains it, but that content still consumes the space where it would have been. Hence the spaces in Google Chrome, Opera, and Windows Internet Explorer which preserves the 200×200-pixel dimensions of the img element.

    On the other hand, Mozilla Firefox omits your img element altogether. visibility: hidden still hides the aforementioned content, but that content consumes no space because Firefox doesn't render anything for img elements with an invalid src attribute and an empty alt attribute. This behavior and the behavior of the other mentioned browsers are both valid per the HTML spec:

    Quote Originally Posted by HTML Living Standard spec
    If the src attribute is set and the alt attribute is set to the empty string

    The image is either decorative or supplemental to the rest of the content, redundant with some other information in the document.

    If the image is available and the user agent is configured to display that image, then the element represents the element's image data.

    Otherwise, the element represents nothing, and may be omitted completely from the rendering. User agents may provide the user with a notification that an image is present but has been omitted from the rendering.
    So the fix is to simply fix your img element code or remove it completely.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    tiffalinglee (08-09-2012)

  • #5
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ahh I see. Thank you for the explanation. The title exists! smiley face.
    Last edited by tiffalinglee; 08-09-2012 at 10:42 AM.


  •  

    Tags for this Thread

    Posting Permissions

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