Ok so there's a site i've been asked to look at and I can't seem to figure out why it only looks bad in safari. It looks fine in every other browser so far and I can't figure it out. The problem takes place in the footer of the document. Here's the link... www.palettekids.com (I SWEAR IT'S NOT MY DESIGN :-))!!! Thanks!
It looks like you have an extra </div> somewhere if you look at the source in safari it is outside of the #container. But in Chrome it is inside. The container is what is holding everything else in. Double check all your closing div's and remove the extra one.
Fix your code errors, like the missing ending tags, like </div>, </body> and </html> among other errors; probably all missing from footer.php. See [Invalid] Markup Validation of palettekids.com - W3C Markup Validator. Scroll down in the validation report to see line numbers and source code.
I don't think coords are supported in Safari:
http://www.w3schools.com/tags/att_a_coords.asp
try using another method (margin perhaps)?
Related
Lately I've noticed a very weird thing in http://www.lua.org/docs.html – when I hover over the links beside the cover images, the layout changes!
I see this in Safari but not in Firefox. Some people have reported that it happens in Chrome too.
The page passes the validator at http://validator.w3.org/ .
The relevant CSS is at http://www.lua.org/lua.css.
It seems to be a Webkit bug. Has anyone seen that as well? Any suggested fix?
It looks like this
hspace="12"
within each img tag might be causing it.
<img src="images/pil2.jpg" alt="" title="buy from Amazon" border="1" align="left" hspace="12">
When I remove it, the jumpiness goes away.
hspace is deprecated. Perhaps webkit only partially supports?
You're right #lhf.
However, I think I found it now. It's the blockquote that is surrounding the images and links.
When I remove it from the HTML, all fixed.
Check out http://campbellcustomcoatings.com/ in something other than IE7, then in IE7. You can see that in IE7, the facebook like button is more to the right and up. I'd like to push it down in IE7 as it is in any other browser. I've tried for over an hour and I can't get it to budge.
I changed the following for IE7 and it seemed to place the button in a similar position to how it looks in Chrome.
#fblike {
margin-left:57px;
margin-top:10px;
}
I think the problem is coming from the floated <li> items. If you highlight the elements using Chrome DOM browser (F12 then select the Elements tab) you can see that because floats exist, the "nav", "container" and "fblike" <div>s do not strictly contain all the child elements. You could create a horizontal navigation without using floats. A list apart has a nice article on lists which may help cross-browser rendering issues (which I am always getting with floats!)
Just add some left and top margin to the iframe. to do this for just IE7, do:
*margin-top:20px; /*20 looked good for me */
*margin-left:20px;
Keep in mind that this won't validate as legit CSS (at least, i don't think it does) but other browsers will ignore it and it works fine.
I know exactly what you're talking about as I have the same issue. The button looks different (size and position) in various versions of IE than in other browsers.
However, you cannot modify or apply CSS to a Facebook Like Box plugin because its content is contained within an <iframe> element coming from the Facebook server.
The only styling options you have are the ones given to you by Facebook.
https://developers.facebook.com/docs/reference/plugins/like-box/
More info:
Embedded Facebook Like-Box won't let me style it. Why?
Adding CSS to Facebook Like Box
I was reading a book about AJAX and the writer said that one should always add a space inside of empty div tags so as to not risk compatibility problems in "some browsers".
So this would be wrong <div></div> and this would be right <div> </div>.
Question: Is he an idiot or does he know something?
Thank you.
He's not an idiot. IE 8 (possibly earlier versions as well?) will subtly mess up your layout if your empty div is really empty; adding a comment seems to be the suggested way of dealing with it, but apparently a space works as well.
i usually add instead of the empty space!
I would add a comment so that nothing is displayed. This does cause problems in ie8 for some reason!
If I put a simple iframe within a DIV any DIV's below it do not show up, the page stops there. If I just type some text with no iframe, it works fine—so it is the adding of the iframe that causes it.
The file loaded by the iframe is dummied right down and just displays the word TEST.
Before I start posting a lot of code and stuff, is this generally an issue—can an iframe be used within a DIV statement?
Thanks
Sounds like you're making a pretty common coding error: you can't short-tag an iframe. For instance:
<iframe src=" ... " />
is invalid. You must provide a full closing element:
<iframe src=" ... "></iframe>
It's silly, but it can cause your page to completely gum up. Also, check to make sure your quotes/apostrophes/carets are all proper, as those can cause similar problems.
Hope this helps!
There's no reason you can't wrap an Iframe in a DIV, but Iframes are notoriously difficult in layout and obviously we don't know what other styling rules might be affecting your box model.
You might try giving the containing DIV an 'overflow:scroll' or even just 'overflow:auto' in your CSS. This can help fix strange box model issues.
The following page is mucked up in IE8 -- the bulk of the content starts appearing half way down the screen and the tables/divs do not look as they should. It works in other browsers and in IE8 compatibility mode. I've inspected the HTML and can't work out what's wrong. Any help would be appreciated. Thanks.
http://www.moviemonitor.com/browse/itunes
After a quick glance in Firefox and IE8, I'd say there is some malformed HTML in there somewhere. Looks to me like a mismatched open/close tag that IE8 isn't forgiving. Run the whole thing through an HTML validator.
I suggest removing the min-height: 800px; CSS value from the first DIV element after <div id="mainContent">. Apparently IE8 renders the first child block level element with that height irrespective of any other contained elements.
Then again, those HTML validation results are pretty grim. Try to fix some of the invalid HTML and make sure that all of your tags are closed properly.