I have a CSS for body tag but it doesn't contain any margin property. but IE 9 shows margin-bottom ad left,right, top as 0 and due to bottom margin my layout is broken. If i take developer tool and uncheck that property the my layout is fine . any suggestions?
Set your body margin property to:
margin: 0px auto;
And check, if thats helps.
If this really is the only browser you're having trouble with, use an IE 9 Conditional Comment after your style tag and above the head tag, for example on specific element or html document as whole:
<!--[if IE 9]>
<style>
#someElementId {margin-top: -33px}
html {margin-top: -33px}
</style>
<![endif]-->
The body element typically has default margins of 8px on each side. This is even mentioned in the default style sheet for HTML in the CSS spec.
Should you wish to remove that, you can set
body { margin: 0; }
in your own style sheet.
Related
I'm having a problem with a fixed position element in mobile Chrome. A little gap between the fixed top element and top of the viewport appears when I swipe up and down without reloading the page.
To replicate this bug the easiest way is to try the bootstrap example https://getbootstrap.com/examples/navbar-fixed-top/ in mobile Chrome. Swipe up and down without reloading page and after few tries you should see a gap.
The most common answer on Chrome rendering issue. Fixed position anchor with UL in body does not work for me:
#element {
-webkit-transform: translateZ(0);
}
Check if your body and html do not have any margin or padding. Also inspect to check if any of the div have any negative margin or paddings
body, html { margin: 0; padding: 0 };
In most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides.
Some browsers allow you to create and use your own user-agent-stylesheet, but if you are developing a website, I would recommend staying away from changing this, since your users most likely will not have a modified stylesheet and would then see a different page than you do.
If you want to change it, you can just do this:
body {
margin: 0px;
padding: 0px;
...
}
Try setting margin-top and padding-top to 0px for the fixed element and the body and html tags
You have margins set on your div#navbar ul.nav.navbar-nav --- set your margin to 0.
see if setting your margin and padding are set to auto, in this case, the margin should automatically adjust accordingly.
body, HTML
{
margin:auto;
padding:auto;
}
My website is left-aligned in IE 8 and 9 when it should be centered like it is in Chrome and Firefox. I have tried standard solutions like the one below with no luck. There are multiple style sheets on the page -- perhaps there's a conflict? Any help would be appreciated...
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
}
#wrapper{
width:960px;
margin:0 auto;
text-align:left;
}
Although you define the following CSS in your style.css stylesheet-
#wrapper{
width:960px;
margin:0 auto;
text-align:left;
position:relative;
}
There is no corresponding element with an ID of wrapper on the page, your #header, #nav, anonymous content and #footer divs are all direct children of the document body.
The link as a child of the h1 with ID "logo" almost certainly needs to have a left value (probably of zero) added in addition to the existing "top" value as it is overlapping your phone number.
You also appear to be encoding the conditional comments added as the first child of body in IE8 as -
<!--[if lt IE 8]--> <!--[endif]-->
Is appearing in the page.
Have you tried using either Chrome Developer Tools or Firebug (for Firefox) to inspect your code?
I am trying to make the the ads at the bottom of the website to be aligned with the content(i.e to have the same padding-right as the posts have.) but even after adding the it to the same div, I am unable to do so,
Here is my code,
<script class="mcolumn-pad" type="text/javascript"><!--
//ad goes here
</script>
Put your ads div in
<div id="dynamic-content" class="outline fix">
Right now its not in the same div, that's why working/showing abnormal.
script defines a script block for running embedded JavaScript code. You can't style the script block. However, what you can do is use a debugger like Firebug or Chrome to examine the HTML that is generated by that script block.
It looks like your script block generates some HTML with an ins element:
<div id="page-main">
...
<ins style="left:180px;display:inline-table;border:none;height:90px;margin:0;padding:0;position:relative;visibility:visible;width:728px">
The ins element has no class or id attributes, but it is a child of a div that has an id attribute, so an easy way to target it with a CSS rule is as follows:
div#page-main ins {
left:180px;
}
I'll leave it up to you to tweak the pixel value to align it as per your preference. You can move right by increasing the pixel value, and left by decreasing the pixel value.
It has inline CSS setting the height to 90px, yet the external CSS is probably messing with the font/line-height such that it is too tall for 90px.
#header .outline {
margin: 0 auto;
position: relative;
width: 960px;
zoom: 1;
z-index: 15;
height: auto !important; /* <-- add this */
}
!important is the only way to override inline styles.
The textboxes in my HTML forms have a height of 30px, and the entered text appears in the vertical center of the textboxes, just as I want in every browser - except IE.
I've checked it in Chrome, FF and Opera. IE8 shows the entered text higher than the center which looks really bad. I tried playing around with the padding, margin and line-height, but cannot get the text to budge from the top edge.
Any suggestions on what CSS property do I need to edit to center the text? I could add it as a IE specific style, if needed.
The website in question is lazydragonbooks.com. Two forms immediately visible are the 'Register' and 'Login' forms.
Chrome
IE 8
Well, messing with IE8 developer tools I found that setting padding-bottom: 0; and padding-top: 10px; aligned the text correctly.
You would have to use a conditional statement to avoid messing up proper browsers. I would recommend using a separate stylesheet:
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css">
<![endif]-->
Within ie8.css..
input[type="text"] {
padding-top: 10px;
padding-bottom: 0;
}
This is of course specific to an input with the set height that you are using.
you can use margin or padding like this for IE
*padding-top:/*px*/;
*margin:/*px*/;
I'm working on a Wordpress site that is not showing quite right in IE7. All other browsers, including IE8 are OK.
First bug is in the top menu. IE7 is showing it to be a bit taller than it should be, and the hover images and search box are not aligned properly.
2nd is at the end of the post where additional page numbers are shown. The top border of the number boxes is being cut off.
Last is also at the end of the post. The text in the yellow bubble box is being pushed down into the bottom of the box.
http://www.archaeologyrevealed.com/another-test-post
Any ideas?
You have to add some IE7 specific styles
Embed style inside HEAD element
<!--[if IE 7]>
<style>
// your styles...
</style>
<![endif]-->
or link to external css file
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="css/ie7.css"/><![endif]-->
For first bug try this:
#s {
position: relative;
top: -5px;
}
Other bugs can be fixed by adding some margin or padding properties.
EDIT
Create ie7.css stylesheet and put this code inside. Then link to it with code posted above. It fixes all bugs you have mention in your post.
#s {
position: relative;
top: -5px;
}
div.pagenumbers p {
margin-top: 4px;
}
div.bubble_bottom {
position: relative;
top: 15px;
}
I suggest trying a CSS reset stylesheet first, which will put different browsers on the same playing field.
That's helped me many times with padding/margin/alignment inconsistencies.