I can't figure out why my page div has different spaces on Firefox and Chrome (and Edge). Also, when I open it on localhost, it is even more moved, so I have to move my div more than what I see on localhost.
that part is in a div called "press2" and it looks like this
.press2 {
margin-left:220px;
position:absolute;
top:1000px;
width:580px;
}
The "top" part is what I have had to edit. When I look at the page on localhost (Wampserver) it is still about 100px further away, and overlaps with the review div above it
.review {
margin-left:270px;
position:absolute;
top:550px;
width:400px;
}
Can anyone help me figure this out?
Just use line-height in body
body{
font-family: Arial;
font-size: 10pt;
text-align: left;
line-height: 12pt;
}
Related
I have a problem, the following text works when I created it in my windows computer, but when we test run it the text stays the same in windows computer, but when the website opens in safari the text is cut of how do I fix this?
The mobile works fine, it's just the desktop.
Here is the CSS Code for the text:
.header{
text-align: left;
font-size: 55px;
font-weight: bold;
font-style: italic;
height: 100%;
width: 80%;
color: #006400;
border-radius: 5px;
margin-left: auto;
margin-right: 75%;
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif,cursive;
}
Tried checking the CSS but not sure what the problem is.
I see you're missing line-height in that CSS block, try defining that first.
If that doesn't work, I recommend looking at this thread, there are a bunch of different solutions here. Font Rendering / Line-Height Issue on Mac/PC (outside of element)
I'm making a site and I'd like it to scale properly on all devices.
On my 1080x1920 screen, it works perfectly, but on thinner devices the page does not look very good.
The white space is where the header text should be.
My code can be found here:
.header {
height: 80px;
background-color:#00117D;
background-size:100%;
color:#FFF;
font-size:30px;
font-weight:bold;
line-height: 80px;
padding: 0 30px;
border-bottom-style:solid;
border-width: 2px;
border-color:#FFF;
font-family:"Segoe UI";
}
.header p, .header a {
float: left;
margin: 0;
margin-left:30px;
color:#FFF;
text-decoration:none;
}
https://github.com/MooneyDev/project-Mooney
What I have done in previous projects it used em font size values on all properties but the body, and then used media queries at various stages to change the px based body value as required. This should catch all other values and keep them proportionate.
I would suggest you look into using bootstrap as it should really speed things up and take away a lot of the pain involved in responsive dev.
I'm having a weird issue here.
Codepen: http://codepen.io/anon/pen/yFbAs
When resized above 979px, the navigation menu ('#nav' div) should appear inline with the div '#logo', vertically in the middle of it. This appears fine when the page is first loaded. (codepen will default to the <979px though so you wont get to see that unless you try it yourself)
When resized to >979px, the '#nav' div is on a new line, as if it or '#logo' is not reset back to an inline-block but is instead appearing to stay as a 'block' element. However, when I check what's going on with the chrome developer tools it appears that it has properly reset back to 'inline-block'. Is the issue with my design?
Any insight is greatly appreciated!
Thanks
Try this edit to your css
http://codepen.io/anon/pen/vHypu
#header {
font-family: 'Montserrat', sans-serif;
padding:5px;
clear:both;
}
#header #logo {
float:left;
font-family: Georgia;
font-size:3em;
font-style: italic;
}
#media only screen and (min-width: 650px) and (max-width: 979px) {
#header #logo {
display:block;
text-align:center;
float:none;
}
It looks like a rendering bug in chrome, as it does not happen on Firefox,
The way around it would be to float the logo left too
Here is a working edited pen http://codepen.io/anon/pen/ovBge
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>
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.