CSS Issue in Firefox/IE - html

I'm working on a site's CSS and am running across an issue with the body margin section. If you look at this in Firefox and then IE, you can see the line isn't lined up right in Firefox, but it is in IE. (In the black header section).
Here is what I have for the body tag, It's something with the margin and I can't figure it out:
body {
margin: -2px;
padding: 0px;
background: #E7E7E7 url(images/bg01.jpg) repeat-x left top;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #888888;
}
Thank you for any responses!

You've placed the image with the text "Nickelson Associates" inside a table cell with a default padding which is 1px in MSIE. You need to force the td element in question to have a padding of 0.
That said, using tables for layout/positioning is considered bad practice.

Related

Body div in css not reading properties properly

I have a simple html and css website which was working fine until i updated some content.
The main background is a colour with one image in the top right corner which is in the 'body' div properties. the font family is also in the 'body' properties.
everything else in my website (div layouts, menu bar background image and div back colours etc.) are all displaying ok, but i have no main background and all font is displaying at a small size and as serif when my set font family is san-serif.
body{
min-height:700px;
min-width:900px;
margin: 0;
padding: 0;
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.4;
background-color: #666;
background-image: url(Images/backleave4.png);
background-repeat: no-repeat;
background-position: right top;
}
As its was working just fine before, i assume the issue is that for some reason its not reading all the body properties correctly.If anyone can give me some advice that would be awesome!
Thanks
EDIT:
Over night it somehow fixed itself, for the most part. I don't know what was wrong. Gahh technology!
Your posted CSS is fine. Can you post a link to the website?
Upgrade your #rightwrap to-
background: rgba(255, 255, 255, 0.6);
I think you want to show your background image all over the page.

Remove top and bottom padding in text input in Chrome/Firefox

I'm trying to make a input look like plain text. The aim is to draw a span, when user clicks the span it hides and displays an input that looks like plain text, but editable by the user.
In Chrome and Firefox I cannot get rid of top and bottom paddings, even if I set padding and margin CSS properties to 0.
My CSS looks like this:
input.myInput {
font-family: "segoe ui";
font-size: 20px;
padding: 0px;
margin: 0px;
outline: none;
border: 0px;
vertical-align: baseline;
}
See that font size is set to 20px. Chrome and Firefox add 4px padding-top and padding-bottom, so that input is 28px tall, not 20px as expected.
You need to reset the line-height of the input element to be 20px as well. By default, some browser add 4px (2 top + 2 bottom) to input element's line-height.
As Diodeus suggested, just add height to your input.
input.myInput {
font-family: "segoe ui";
font-size: 20px;
height: 20px;
padding: 0px;
margin: 0px;
outline: none;
border: 0px;
vertical-align: baseline;
}
line-height will not work
It could be your font. Try setting the CSS height of the input directly or try adjusting line-height.

HTML & CSS: manipulating font/text height?

I am using a custom font (Oswald) for the headings or titles within my page. I believe that its' height is conflicting with the native fonts (Arial, san-serif etc.) and would like to know if there is a way to set both fonts evenly...? If more text is placed in later on, the gap difference becomes substantial.
Please take a look at what I have here: http://jsfiddle.net/x6v7F/
I have a temporary background fade in and out to illustrate.
thank you.
It doesn't seem to be a font-size issue, the issue seemed to be with you specifying the line-height
If you see this fiddle, you can see I've changed h1 and h2 to have these line-heights
h1 {
font: 16px 'Oswald', Arial, Helvetica, sans-serif;
text-transform: uppercase;
color:#000000;
margin:14px 0;
line-height: 100%; <----
}
h2 {
font: 12px 'Oswald', Arial, Helvetica, sans-serif;
text-transform: uppercase;
color:#BBBBBB;
margin-bottom: 14px;
line-height: 100%; <----
letter-spacing: .2px;
}
If you check that Fiddle, it seems to have fixed your problem?
Rob has 4 sections that sit side by side (you may have to bump up width of jsfiddle window). His prob is that he wants his sections to line up along the bottom, but is having issue because the varying text sizes between his body font and header fonts.
Many of the css grid frameworks try to address these type of issues: normalizing the heights of text and headers so that all lines fall on an imaginary grid of baselines.
To be honest, I would just give the sections a static height and leave some fuzzy space at the bottom for margin of error.
section { height: 370px; position:relative; }
section .button { position:absolute; bottom:0; right:0; }
Edit:
If you're looking for a dynamic section height, you'll have to leverage javascript magic. JQuery:
<style>
section { position:relative; padding-bottom:50px; }
section .button { position:absolute; bottom:0; right:0; }
<style>
<script>
var max_height = 0;
$('section').each(function() {
max_height = Math.max(max_height, $(this).height());
}).height(max_height);
</script>

IE7 CSS div margin issue

I have a minor CSS problem, but I'm having trouble fixing it because I don't have any computer handy with IE7 installed...
In IE8, Chrome, FF, etc. I see this (correctly):
but IE7 gives me this:
the HTML code follows:
<div id="hub">
<div class="title highlight">Faster, Cheaper, Better</div>
<p>PNMS...
the relevant CSS code follows:
#hub {} /* literally nothing */
#hub div.title {
font-size: 4em;
font-style: italic;
font-variant: small-caps;
float: left;
margin: 5px 0px 20px 0px;
width: 940px; /* same as parent container */
}
.highlight { color: #ff6633;}
p {
text-indent: 30px;
font-size: 1.3em;
line-height: 1.1em;
letter-spacing: 1px;
margin: 5px;
}
Based on visitor traffic, I need my site to be compatible with IE7 (thankfully NOT IE6). But again, guessing blindly and then running browsershots.org is not a very efficient manner.
Can someone help? Thank you.
Found this somewhere, it may help:
CSS Double padding IE7 Fix
"Nothing is more annoying than finishing a web design, having it dispay just the way you like it in your standards compliant browser (cough download Firefox) only to remember to check it in IE and find it a garbled mess. Today I came across a rather annoying CSS bug in IE7. IE7 doubles the top padding on my navigation menu."
CSS Code
#nav {
clear: left;
padding: 16px 0 0 30px;
}
"And the fix…
Just add display: inline-block to the div with double padding. That’s it… I know, it’s ridiculous."
#nav {
clear: left;
display: inline-block;
padding: 16px 0 0 30px;
}
Another alternative is the parent of the Div which is not displaying correct add the margin: 0 in CSS for it.
Found it. The CSS body tag had a line-height: 18px;
For some reason known only to Microsoft, out of IE7, IE8, IE9, Firefox 3.5~6, and Chrome, only IE7 honored that instruction for a deeply nested div 400 lines further down the CSS sheet.

how do you workaround this inconsistency between IE, Firefox and Chrome

i have a background image on a webpage and i am placing an image in my body to line up over the image:
here is my css:
Background:
body {
font: 12px tahoma, Arial, Helvetica, sans-serif;
line-height: 1.5em;
margin: 0px;
padding: 0px;
color: #241a10;
background:#c9e4ec url(/Content/images/myImage.gif);
}
Image:
#leftSideContainer {
position:relative;
margin-top:-47px;
width:147px;
height:93px;
background:url(/Content/Images/image2.gif);
}
In IE7 and Chrome, it looks perfect and lines up exact:
But in IE8 and Firefox, the image shows a little lower down compared to the background image:
If it was just an old version of IE that was broken i wouldn't care but in this case firefox is broken as well.
i tried playing with the:
margin-top: -47px;
but if i move it higher to get it to line up in firefox, it them obviously looks misaligned for the other browsers.
any suggestions for what might be causing this discrepancy.?
CSS reset is your friend
http://meyerweb.com/eric/tools/css/reset/
The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.