08-08-2012, 07:51 AM
Hello everyone. I'm a little confused on this tumblr layout that I'm working on for a friend.
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?
08-08-2012, 07:57 AM
Add a position:relative; z-index:10; to .header .heading to bring it above some other elements that hide it.
08-08-2012, 10:54 PM
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?
08-09-2012, 08:15 AM
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:
<img src= ''height='200px', width=' 200px' />
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:
<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:
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.
08-09-2012, 11:40 AM
ahh I see. Thank you for the explanation. The title exists! smiley face.