I've got a fairly simple design that I'm working on in ASP.NET.
The problem is when I take the design from flat HTML which works fine, to asp.net, it adds what looks to be a 20px blank margin at the top of the page and around certain elements.
I presumed this was to do with the not having set my margins to 0px on the body and form elements in the CSS. I've done this, and it still has the problem in Chrome and Firefox, but not in IE7 or IE8.
Any ideas?
I've seen some unwanted margins on ASP.NET pages and they had something to do with invalid markup (might have been because of a missing div end tag or something similar - I can't remember the exact reason). So check your markup. Also make sure that you are using a valid doctype (i.e. not in quirks rendering mode).
Firebug is often a great help in this kind of situations. You can inspect exactly which element is causing the extra margins. Chrome has a similar "Inspect element" functionality built in.
Related
can someone look at this site for me I have a serious problem with the sub pages content div going over to the right bar this issue the site renders fine in all other browsers except safari firefox and iphone
www.firstavenuedesign.co.uk/demo
http://www.firstavenuedesign.co.uk/demo/offers.aspx
if u look at the above page in ie it will display fine and chrome any ideas anyone
It looks as though the problem you are having relates to your parent DIV 'collapsing' on your floated child elements.
The following article explains how to resolve this issue (in the Collapsing section) a long with other approaches for laying out floating elements:
http://www.alistapart.com/articles/css-floats-101/
Validate your html and css for those lists of significant errors. Then get this working in a modern browser before seeing how IE screws things up. The other browsers are showing what you wrote. IE makes things up as it goes along. Never, ever trust IE to do anything right.
Also, you have space before the doctype. Some versions of IE go into quirks mode in that situation.
I have this website, http://www.escuelita.info. Now I tried many times to make it work on IE 7 (possibly IE6 too didn't check) but for some reason the middle frame on the right doesn't show content.
If you compare it to Firefox or Chrome (or even IE8) it works ok.
I need to fix this but I'm not sure what's causing the problem..
Note
I checked with IE7 and the pages don't show content
(the main content DIV content_outer)..
The content shows below the sidebar. Either IE7 enters quirks mode or you trigger some sort of bug that causes IE7 to misbehave.
Double check your doctype, tags and most importantly, get rid of those nested tables. Nested tables are EVIL and I'd bet they're your culprit. Use CSS grids (here's one that's really good: http://www.1kbgrid.com/) instead.
Dunno if this solves your problem, hopefully so.
http://betawww.helpcurenow.org/media/press/
You'll see I have used spans within an anchor, with the span.hover-description set to display:none; by default, and on a:hover that span is set to display block and absolutely positioned to create a tool-tip effect when hovering over the name and email of the "For Immediate Release" contact names.
Everything looks as desired in Firefox, but Chrome reveals my unknown blunder somewhere.
Any help on what's the problem that is causing Chrome to not display like Firefox?
Incidentally, Explorer shows the tool tip as expected, although I'm getting a funky bottom margin issue below the names, and Safari has the same issue as Chrome (must be a webkit rendering setting that I need to accommodate for).
OK, I figured it out. Since I'm using a pretty complex nesting structure to accomplish the CSS tool-tips, I overlooked the fact that I had actually nested a p tag within a p, and of course that is a no-no.
Firefox is really friendly to a lot of validation errors, but Chrome and Safari seem to be much more strict.
In the end I changed the p's to span elements and all is well across browsers.
I am pulling my hair trying to find a fix for this problem. If you go to this site you will see that (under IE) the slider and the menu on the top is broken. Works fine under all modern browsers.
Any idea how to fix this? Thanks.
Edit: Want to add that the original site design works fine under IE. I did a massive amount of editing under the hood and somewhere along the line this one was broken that I can't seem to find a fix for. Since I did a lot of customization, I think it seems unfair to ask the original author for a fix (and he is not very responsive either).
The document invalid. In particular, there is a <style> element before the Doctype. This triggers Quirks mode and causes browsers to become very inconsistent (e.g. IE emulates a log of bugs from IE 5.5).
Always work in standards mode and perform basic automated QA.
I can't check it for you, since I've not got access to IE right now, but I've often found that adding position:relative to misbehaving elements is something of an IE magic bullet.
No fix but a lead: the issue with the menu bar is one of IE's mysterious float positioning bugs, as can be demonstrated by putting <div style="clear: both">xxx</div> after the navbar ul. (Note that it won't work if the div has no content!)
stuff about box model deleted: as David Dorward mentions this is caused by quirks mode, and moving the style down past the doctype causes the slider to behave sensibly.
So I have a signup form on the top of my website and in safari/firefox it looks perfect but on ie7 for some reason it is pushed down so it does not look right. I tried removing all padding/margins on all of those elements but it still seems like there is something pushing it down when that happens. Does anyone know why this is happening. You can see it at the top of this page:
http://www.campusmediawatch.org/partners
Thanks!
A <form> needs to have padding & margin set to 0. Then setting the vertical alignment to center may help too. If it still doesn't work; try changing the doctype to HTML instead of XHTML, since IE uses different renderers for each doctype.
There are two likely cuases:
It's always a bit tricky to debug these issues but this could be a problem with line-height. I would try specifying an explicit line height of 1em or so to elements in the form.
In your case it's more likely that the submit button is causing your issue. The different web browsers render submit input tags improperly. Try hiding your submit button by styling it with display none to see if this is in fact causing your display issue in IE. If it is you can create a stylesheet specifically for IE via conditional comments and apply alternative styling to the submit tag. OR you can use absolute positioning for the submit input which should allow you to avoid resorting to a browser specific stylesheet.