Please help:
this is my site
http://www.dukeofessexpolocup.com/ when i open in ie7 it doesn't display both left and right ears:
div#Ears_left{ padding: 0; float:left; width: 41px;display:inline;}
.custom{margin:0 auto;text-align:center;}
div#Ears_right{ text-align: right;width: 39px;float:right;display:inline;}
div.ears {margin-top: 127px;}
It could look like you're missing a correct closing tag for #Ears_left, as it's rendering outside the tag when viewed in IE7...
Go over your markup and recheck that you closed your tags correctly.
UPDATE
Actually it seems its something inside the div#body that's probably not closed correctly..
As Spudley says in the comment, go here:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.dukeofessexpolocup.com%2F&charset=%28detect+automatically%29&doctype=XHTML+1.0+Strict&group=0&user-agent=W3C_Validator%2F1.2
And start fixing errors :)
Related
This question already has answers here:
How to remove margin space around body or clear default css styles
(7 answers)
Closed 6 years ago.
Web Page
In the above web page photo I have taken a <div> with height : 100vh; and width : 100%;
I don't want the white body border.
Someone please help !!!
Well, that margin is there because the body element has a default margin, set by the browser. To get rid of it, you need to set margin: 0 on the body element.
This question has actually been asked many times before, in various ways. For future questions you may have, it may be useful to take the follow steps;
Open the developer tools in your browser
Chrome Developer Tools
Safari Developer tools
Firefox Web Console
Inspect the elements to see which one is the problem
Search Google, or StackOverflow for questions with similar scenarios as yourself
If, after inspecting and googling, you still cannot solve your problem; post a question on here, along with examples of your code, and details of your research. Having more information definitely helps us to figure out your problem.
As you haven't add any coding.So in general you can add this and try:
width:100%;
max-width:100%;
margin-left:auto;
margin-right:auto;
I think this is an issue with default padding or margin creating a white border... Add the below to ur css....
.your_div_class{
width:100%;
height:100%;
padding:0px;
margin:0px;
}
Use that code on your style or .css file and you'll be fine:
body {
height: 100%;
width: 100%;
margin: 0px;
When I use in-page links or "anchors" to reach a part of the page, the scrollbar doesn't allow me access to the content above -- even though it is there in the HMTL.
My site is developed in WordPress but I think the problem is more my CSS.
See the naughty
http://adanewmedia.org/submissions/#review
versus the nice http://adanewmedia.org/submissions/
Any ideas are appreciated!
Line 92 of style.css, remove this:
#main {
overflow: hidden;
}
Seems like a weird bug, or maybe you have a height set in some parent element to the #main div. Removing that style should fix it though.
Further inspection I found this (style.css line 96):
#main-content, #secondary {
margin-bottom: -32767px;
padding-bottom: 32767px;
}
This is where your issues begin. Removing this nonsense fixes your original issue, but changes up the style of your site quite a bit. If you want to remove the black sidebar/footer, do that instead of pushing the containers all over the place.
When I tried playing with your code, it seemed to be this line in your style sheet that caused it - http://adanewmedia.org/wp-content/themes/twentyfourteen-child-ada/style.css?ver=3.9.1
#main-content, #secondary {
margin-bottom: -32767px;
padding-bottom: 32767px;
}
Not sure what you are trying to do with that.
Also: firebug is rendering the page very oddly - I'd try validating your code as if Firebug is struggling to render the page correctly, then browsers are also likely to throw unexpected layout issues.
I'm having a problem in Google Chrome. I'm using a simple hover state on a display:block; link to change only the background:url(); property on the hover.
Google Chrome shows the actual hover change ok, but when I mouse out of the area, the background goes transparent/disappears.
Here's my CSS:
#branding #logo a {
width: 259px;
height: 201px;
border:none;
display: block;
background:url(images/logo.png) top left;
}
#branding #logo a:hover {
background:url(images/logo_hover.png) top left;
}
The actual site is here: http://beerblestudy.org. Again this is only happening for me in Chrome. Any thoughts?
It's working for me an all browsers. Try deleting your cache because it's working normally. I recomment you to delete the lines top left since they aren't necessary
Your background is disappearing in chrome here too.
I know I shouldn't "me too" on here, but this is odd and what brought me here was the same problem I'm having on a site I built recently: http://macvillain.com - the right hand column image blocks.
I tested thoroughly on most browsers (not ie6 or 7 - I've banished them) and has been fine in chrome for the past two weeks until today. Sometimes clearing cache etc works for a little while then it comes back. I don't get it...
UPDATE:
Hi I got an answer on the Google Chrome forum which said:
"Chrome uses strictly HTML5. Validate HTML code http://validator.w3.org/"
I had forgotten to do this and there were a couple of invalid things which I fixed and now all is fine and dandy.
I suggest you do the same.
Try this technique: I saw a JQuery plugin that automatically download images specified in CSS style sheets.
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/
First post from a lurker, so please bear with me.
In my company's Facebook app, there's a form that can have error messages, which are getting double left padding. They have a fair bit of padding to line up with the inputs above them (which also get the left padding).
(Broken error message img) http://img687.imageshack.us/img687/2609/windows7x64ie9beta2.png
When I pop this same page out of the Facebook iframe, it displays normally, with form elements and error messages lining up.
(Non-broken error message img) http://img535.imageshack.us/img535/651/windows7x64ie9beta14.png
The actual code is an inherited (in all senses of the word) mess, but does work in everything including IE6 & 7 with no hacks. Here are all of the non-reset-styles on these lis:
clear: none;
font-size: 12px;
margin-bottom: 0;
margin-top: 5px;
overflow: hidden;
padding-left: 160px;
I've confirmed that doubling the padding yields the messed up view (I can only use IE Developer tools in the non-messed up view since it can't handle the iframe).
Anyone have any idea? Other than ripping up this old code and starting over?
UPDATE: Seems like ripping up the old code might be a necessity. I have some ULs with no children that might be causing some breakage.
UPDATE 2: The dynamically generated dom is a mess, but the engineers here have no time to refactor it, so I may never get the answer to this question. :(
This may not be an ideal solution, but I would use a condition and a separate IE9-only stylesheet to fix this issue.
Something like:
<!--IF[IE 9]-->
// Include IE9 stylesheet here
<![endif]-->
and in that stylesheet maybe do something like this:
clear: none;
font-size: 12px;
margin-bottom: 0;
margin-top: 5px;
overflow: hidden;
padding-left: 80px; /* half the padding */
Are you using floats? I reached this question via a similar problem.
Check out this answer: IE 9 CSS Float problem!
I am having a hard time figuring out why things look so different in IE and Firefox.
Here is a CSS class
.logo { width: 224px; height: 120px; position: relative;
display:block; left: -1px; background-image: url(logo.png);}
In IE this works as expected, but in Firefox it behaves like a drunk! I see 3 logo.png at different places on a page. If I remove display:block then I cannot see the image in either browser.
Any comments appreciated.
You might need to add
background-repeat: none;
to your css class. And for future reference, it's always IE that screws up ;)
EDIT: If that doesn't solve your problem, please put up a sample site live somewhere we can look at it and experiment a little. Also, Firebug might be helpful.
EDIT2: Removed this, since I noted the difference between firebug and the src I got from right-clicking and selecting "View Source..."
EDIT3: Steve found your problem: You can't self-close anchors. Change
<a href="/" id="logo" />
to
Your problem is in the HTML. You can't can't self close A tags
Correct, the problem is always IE. If firefox has an issue it's usually an issue with the w3c specs. Not being a fanboy, it's just the way things are.
I guessing your problem is that the default value for background-repeat is different between the browsers. You should try setting background-repeat:no-repeat EDIT: Maybe not, all browsers default to repeat.
It would be useful to know what element you are applying logo to. Whatever it is is probably collapsing to a height of 0px when not a block. Put a border on it to see what's going on there.