i'm a first time poster, long time enthusiast.
So i'm working on my personal website, and i haven't got that much experience in html/css, but i've come across a strange mismatch between firefox and chrome. And i was wondering if the wise people of the internet could direct me to where my (probably obvious) error is.
The problem im experiencing is that firefox will cut of the last 2 letters of my image. Ive colored the different parts so its more visible. I'll also post my code for those who want to see that. If you guys could point me towards a solution i would be very much obliged.
Firefox:
http://i.imgur.com/aFbYWS7.png
Chrome:
http://i.imgur.com/xumAiwk.png
/* Reset
------------------------------------------------------------ */
* { margin: 0; padding: 0; }
html { overflow-y: scroll;}
body { background:#ffffff; font-size: 13px; color: #666666; font-family: Arial, helvetica, sans-serif;}
ol, ul { list-style: none; margin: 0;}
ul li { margin: 0; padding: 0;}
h1 { margin-bottom: 10px; color: #111111;}
a, img { outline: none; border:none; color: #000; font-weight: bold; text-transform: uppercase;}
p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;}
img { display: block; margin-bottom: 10px;}
aside { font-style: italic; font-size: 0.9em;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
/* Structure */
#wrapper {
width: 96%;
max-width: 920px;
margin: auto;
padding: 2%;
}
/* Banner */
#banner {
float: left;
margin-bottom: 15px;
width: 100%;
background-color:red;
}
#banner img {
max-width: 450px;
width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
background-color:blue;
}
#occp {
float: left;
margin-bottom: 15px;
width: 100%;
background-color:green;
}
#occp img {
max-width: 800px;
width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
background-color:yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> Demo | Responsive Web</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<link href="test.css" type="text/css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type='text/javascript' src='scripts/respond.min.js'></script>
</head>
<body>
<div id="wrapper">
<header>
<div id="banner">
<img src="https://dl.dropboxusercontent.com/u/15472320/logo.svg" alt="Banner" />
</div>
<div id="occp">
<img src="https://dl.dropboxusercontent.com/u/15472320/occp.svg" alt="Electrical Engineering Student" />
</div>
</header>
</div>
</body>
</html>
Given the JS fiddle SVG file in the comments section I was able to set the width to 100% and get the graphic to be the same size in chrome and firefox, I have not tested opera, IE, Edge, or safari.
<svg
...
width="100%"
...>
</svg>
JS Fiddle Fork of just the SVG
http://jsfiddle.net/7nn94k13/1/
Code Snippet with the SVG placed inside the original code
/* Reset
------------------------------------------------------------ */
* { margin: 0; padding: 0; }
html { overflow-y: scroll;}
body { background:#ffffff; font-size: 13px; color: #666666; font-family: Arial, helvetica, sans-serif;}
ol, ul { list-style: none; margin: 0;}
ul li { margin: 0; padding: 0;}
h1 { margin-bottom: 10px; color: #111111;}
a, img { outline: none; border:none; color: #000; font-weight: bold; text-transform: uppercase;}
p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;}
img { display: block; margin-bottom: 10px;}
aside { font-style: italic; font-size: 0.9em;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
/* Structure */
#wrapper {
width: 96%;
max-width: 920px;
margin: auto;
padding: 2%;
}
/* Banner */
#banner {
float: left;
margin-bottom: 15px;
width: 100%;
background-color:red;
}
#banner img {
max-width: 450px;
width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
background-color:blue;
}
#occp {
float: left;
margin-bottom: 15px;
width: 100%;
background-color:green;
}
#occp img {
max-width: 800px;
width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
background-color:yellow;
}
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> Demo | Responsive Web</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<link href="test.css" type="text/css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type='text/javascript' src='scripts/respond.min.js'></script>
</head>
<body>
<div id="wrapper">
<header>
<div id="banner">
<img src="https://dl.dropboxusercontent.com/u/15472320/logo.svg" alt="Banner" />
</div>
<div id="occp">
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="100%"
height="22.796349"
id="svg3086"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="New document 6">
<defs
id="defs3088" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.35"
inkscape:cx="222.35964"
inkscape:cy="-265.74468"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="463"
inkscape:window-height="423"
inkscape:window-x="100"
inkscape:window-y="100"
inkscape:window-maximized="0" />
<metadata
id="metadata3091">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-152.64036,-243.82116)">
<text
xml:space="preserve"
style="font-size:31.58077812px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:110.00000238%;letter-spacing:-4.82484102px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Franklin Gothic Book;-inkscape-font-specification:Franklin Gothic Book"
x="150.44296"
y="261.72156"
id="text4820-4"
sodipodi:linespacing="110%"><tspan
sodipodi:role="line"
id="tspan4822-0"
x="150.44296"
y="261.72156"
style="font-size:26.31731796px;letter-spacing:-0.87724388px">Electrical Engineering Student</tspan></text>
</g>
</svg>
</div>
</header>
</div>
</body>
</html>
I've made several changes to the HTML/CSS with no luck, as the commenter said it's most likely something to do with how FF handles SVG's.
If the viewport and viewBox do not have the same width to height ratio, the preserveAspectRatio attribute directs the browser how to display the image.
Here's two great resources to refer to on this topic.
http://jonibologna.com/svg-viewbox-and-viewport/
http://codepen.io/jonitrythall/blog/preserveaspectratio-in-svg
Alternatively, use a png or jpg, as these files aren't likely to have this problem.
Related
I need some help with my messy code (excuse me for having lot of text in my native language). I need to fit the IFRAME in between head and footer of the site, so it will look the same on every monitor (resolution).
Thanks!
body {
margin: 0;
background-image: linear-gradient(to right, #292c33, #a0b2d0, #dee9f6, #a0b2d0, #292c33);
}
p{
color: #272727;
text-align: left;
display: block;
font-family: 'Montserrat', sans-serif;
padding-left: 14px;
font-size: 12px;
text-decoration: none;
// nadefinování písma na stránce
}
.nav{
background-color: #eaeaea;
overflow: hidden;
}
.nav a{
float: left;
display: block;
color: #272727; // barva fontu
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 100%;
border-bottom: 3px solid transparent;
font-family: 'Montserrat', sans-serif;
height: 30px;
}
.nav a:hover{
border-bottom: 3px solid #310a0b;
}
.nav a.active{
border-bottom: 3px solid #b50c0f;
}
.fotka{
display: block;
float: right;
width: 5%;
height: 5%;
margin: 12px;
}
footer{
padding: 1px;
background-color: #eaeaea;
color: #272727;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
position: fixed;
bottom: 0;
width: 100%;
}
.zvideo{
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 0%;
}
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='icon' href='favicon.ico?' type='image/x-icon'/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<title>Hlavní stránka</title>
</head>
<body>
<div class="nav">
<a class="active" href="index.html">Domů</a>
Zaklínač
Hry
Knížky
<img class="fotka" alt="logo stránky" src="logo.png">
</div>
<!--NÁSLEDUJE DIV IFRAMU-->
<div class="zvideo">
<iframe class="zvideo" src="https://www.youtube.com/embed/hquuwfa3FCo?autoplay=1&mute=1" width="1152px" height="648px" frameborder="0" allow="autoplay"></iframe>
</div>
<footer>
<p>Autor: Jan Michalisko</p>
<p>Můj email: hachikolp#gmail.com</p> <!--mailto: mi přišel velmi barbarský, takže jsem tam nechal jenom paragraf-->
</footer>
</body>
</html>
I hope that you will be able to identify what is footer, head etc., i am really not a good at coding yet, lol. Thank you for help!
According to the comments, you just trying to center an iframe. The I in iframe stands for inline. So the correct name for the <iframe> tag is: inline frame. As the name indictaes, it is not a block level element but an inline element. As such it can not be centered by using margin: 0 auto; by default. So you need to add display: block; first, in order to change the iframe into a block level element.
iframe {
display: block;
margin: 0 auto;
background-color: blue;
}
<iframe src="">Just a Test</iframe>
I've been working on my website the entire day but now I suddenly noticed that in mobile format my buttons (the logo and the menu button they are called #logo and #menu-icon) don't work anymore. The used to work some time ago. And in the desktop (over 768 pixel wide) version they all work fine.
/*--------STYLE.CSS--------*/
#import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:300,500,700');
* {
margin: 0;
padding: 0;
border: 0;
}
html {
height: 100%;
}
body {
height: 100%;
background: #424949;
color: #f5f5f5;
font-family: 'Alegreya Sans', sans-serif;
margin: 0;
}
h2 {
font-size: 250%;
font-weight: 700;
text-align: center;
padding-top: 2%;
}
p {
font-size: 160%;
font-weight: 500;
line-height: 150%;
padding: 3%;
text-indent: 2%;
text-align: justify;
}
img {
max-width: 100%;
height: auto;
width: auto;
margin-bottom: -4px;
}
header {
background-color: #1a1a1a;
width: 100%;
height: 86px;
}
#header-inner {
max-width: 1200px;
margin: 0 auto;
}
#logo {
margin: -5px 0 -5px 20px;
padding: 0 10px 0 10px;/*top right bottom left*/
float: left;
width: 96px;
height: 96px;
background: url(img/logohead96x.png) no-repeat center; /*org img/logo128x.png*/
}
nav {
float: right;
padding: 4px 20px 0 0;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: url(img/nav.png) center;
}
a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}
ul {
list-style-type: none;
margin-right: 10px;
}
nav ul li {
font-family: 'Alegreya Sans', sans-serif;
font-size: 150%;
display: inline-block;
float: left;
margin-top: 35px;
}
nav ul li a {
color:#f5f5f5;
text-decoration: none;
padding: 25px;
}
nav ul li a:hover {
color: #707b7c;
}
.current {
color: #707b7c;
}
.container {
overflow: hidden;
width: 100%;
height: auto; /*calc(100% - 86px - 29px)*/
background-color: #1a1a1a;
}
.container-inner {
height: 100%;
max-width: 1100px;
margin: 0 auto;
}
.container img {
max-height: 100%;
min-width: 100%;
height: 100%;
}
.container video {
max-height: 100%;
min-width: 100%;
height: 100%;
}
footer {
background: #1a1a1a;
width: 100%;
}
.social {
list-style-type: none;
text-align: center;
}
.social li {
display: inline;
}
.social i {
font-size: 460%;
margin: 1%;
padding: 5% 5% 5% 4%;
color: #707b7c
}
.social i:hover {
color: #f5f5f5;
}
footer.second {
background-color: #424949;
margin: 0;
}
footer.second p {
margin: 4px 0 0 0; /*top right bottom left*/
padding: 0 0 0 0;
text-align: left;
font-size: 130%;
font-family: 'Alegreya Sans', sans-serif;
}
/*--------MEDIA--------*/
#media screen and (max-width: 768px) {
h2 {
font-size: 150%;
}
p {
font-size: 120%;
}
header {
position: absolute;
}
#logo {
margin: -5px 5px -5px 5px;
background: url(img/logohead64x.png) no-repeat center;
}
#menu-icon {
display: inline-block;
}
nav {
padding: 25px;
}
nav ul, nav:active ul {
display: none;
z-index: 1;
position: absolute;
padding: 20px;
background: #1a1a1a;
right: 20px;
top: 60px;
border: 3px solid #ffffff;
border-radius: 10px 0 10px 10px;
width: 40%;
}
nav:hover ul {
display: block;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0 10px 0;
}
.banner {
padding-top: 86px;
}
.social i {
font-size: 180%;
}
}
<!-- Home page of slothy.cloud -->
<!DOCTYPE html>
<html>
<!--
My small cozy website.
© veryslothysloth 2018
-->
<head>
<!-- Links -->
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="img/favicon/safari-pinned-tab.svg" color="#2e86c1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Open Graph Protocol -->
<meta property="og:url" content="://slothy.cloud" />
<meta property="og:type" content="website" />
<meta property="og:title" content="slothy.cloud | by veryslothysloth" />
<meta property="og:description" content="A small slothy website." />
<meta property="og:image" content="img/slothyicon.png" />
<meta property="og:image:secure_url" content="img/slothyicon.png" />
<!-- Twitter card -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="slothy.cloud |by veryslothysloth">
<meta name="twitter:description" content="A small slothy website.">
<meta name="twitter:image" content="img/slothyicon.png">
<meta name="twitter:image:src" content="img/slothyicon.png">
<!-- Data -->
<title>slothy.cloud | by veryslothysloth</title>
<meta charset="utf-8">
<meta name="description" content="A small slothy website.">
<meta name="keywords" content="sloth,slothy,veryslothysloth,file,upload,hosting,lolisafe">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#aed6f1">
</head>
<body>
<header>
<!-- Header -->
<div id="header-inner">
<nav>
<ul>
<li>Home</li>
<li>Cloud</li>
<li>Stat</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<!-- Main Body -->
<div class="container">
<video loop>
<source src="img/alley.mp4" type="video/mp4">
</video>
<!--<div class="container-inner">
<p>Test Text</p>
</div>-->
</div>
<!-- Footer -->
<footer>
<ul class="social">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-steam"></i></li>
<li><i class="fa fa-at"></i></li>
</ul>
</footer>
<!-- Second Footer -->
<footer class="second">
<p>© veryslothysloth</p>
</footer>
</body>
</html>
This may be a completely stupid mistake or small typo but I'm quite tired and can't seem to figure this out myself with my really limited coding skills... I'm quite new to all this. Thanks in advance!
The div .container lies over the nav and menu-icon. So the hover doesnt works.
add a z-index to the header to solve it
header {
z-index: 99;
}
I'm not 100% sure what "they don't work" means, but it does stand out that one of the links is to index.html and the other is to #. The first will reload the current page (assuming the HTML you provided is index.html, the second will scroll the current page to the top. What behavior are you seeing, and what behavior are you looking for?
I have made this:
#basketLinkId .buttonCart {
padding-top: 8px;
padding-right:17px;
padding-bottom:12px;
padding-left:5px;
border-radius: 6px;
color: #fff;
text-decoration: none;
background-color: #28a8e0;
float: right;
position: relative;
height:10px;
}
#itemCountForCart{
font-size:9pt;
}
.cartCornerIcon, .cartCornerTextBestellen {
display: inline-block;
font-size:10pt;
margin-left:0.20em;
}
#basketLinkId .svgCartIcon {
width: 36px;
height: auto;
vertical-align: middle;
}
#itemCountForCart {
position: absolute;
top: 10px;
left: 16px;
min-width: 2rem;
text-align: center;
}
<a href="#" class="cartLinkClass" id="basketLinkId">
<div class="buttonCart">
<div class="cartCornerIcon">
<!-- svg image to code : https://jakearchibald.github.io/svgomg/ -->
<svg class="svgCartIcon" xmlns="http://www.w3.org/2000/svg" width="141px" height="88px" viewBox="0 0 6.7884028 298.54643"><path d="m 241.22792,213.72354 -282.900379,0 -118.939781,-189.976486 -73.82728,0 0,-23.7470599713325 96.06009,0 L -19.442559,189.97648 l 260.670479,0 M 52.037289,263.61893 c 0,19.28289 -15.64461,34.9275 -34.9275,34.9275 -19.2828876,0 -34.927498,-15.64461 -34.927498,-34.9275 0,-19.28289 15.6446104,-34.9275 34.927498,-34.9275 19.28289,0 34.9275,15.64461 34.9275,34.9275 z m 179.627041,0 c 0,19.28289 -15.64461,34.9275 -34.9275,34.9275 -19.28289,0 -34.9275,-15.64461 -34.9275,-34.9275 0,-19.28289 15.64461,-34.9275 34.9275,-34.9275 19.28289,0 34.9275,15.64461 34.9275,34.9275 z"/></svg>
</div>
<div id="itemCountForCart"> 100 </div>
<div class="cartCornerTextBestellen">Bestellen</div>
</div>
</a>
In Chrome it looks like this:
And in Firefox like this:
But in internet explorer it looks like this:
Any idea why this happen. Plus how can i move the text "Bestellen" a bit up. Because if I move it with margin, the icon will also move while i seperated them in different divs.
Hope anyone can help me out a bit. Thank you.
Internet Explorer 9-11 has known issues with scaling SVG images and this is likely a side-effect of this :
The general recommendation is to add explicit height and width properties, which you could try with something like :
#basketLinkId .svgCartIcon {
/* Setting explicit widths and heights can help rendering SVG issues */
width: 36px;
height: 20px;
vertical-align: middle;
}
Example using explicit height/width
#basketLinkId .buttonCart {
padding-top: 8px;
padding-right: 17px;
padding-bottom: 12px;
padding-left: 5px;
border-radius: 6px;
color: #fff;
text-decoration: none;
background-color: #28a8e0;
float: right;
position: relative;
height: 10px;
}
#itemCountForCart {
font-size: 9pt;
}
.cartCornerIcon,
.cartCornerTextBestellen {
display: inline-block;
font-size: 11pt;
margin-left: 0.20em;
}
#basketLinkId .svgCartIcon {
width: 36px;
height: auto;
vertical-align: middle;
}
#itemCountForCart {
position: absolute;
top: 10px;
left: 16px;
min-width: 2rem;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a href="#" class="cartLinkClass" id="basketLinkId">
<div class="buttonCart">
<div class="cartCornerIcon">
<!-- svg image to code : https://jakearchibald.github.io/svgomg/ -->
<svg class="svgCartIcon" xmlns="http://www.w3.org/2000/svg" width="141px" height="88px" viewBox="0 0 6.7884028 298.54643">
<path d="m 241.22792,213.72354 -282.900379,0 -118.939781,-189.976486 -73.82728,0 0,-23.7470599713325 96.06009,0 L -19.442559,189.97648 l 260.670479,0 M 52.037289,263.61893 c 0,19.28289 -15.64461,34.9275 -34.9275,34.9275 -19.2828876,0 -34.927498,-15.64461 -34.927498,-34.9275 0,-19.28289 15.6446104,-34.9275 34.927498,-34.9275 19.28289,0 34.9275,15.64461 34.9275,34.9275 z m 179.627041,0 c 0,19.28289 -15.64461,34.9275 -34.9275,34.9275 -19.28289,0 -34.9275,-15.64461 -34.9275,-34.9275 0,-19.28289 15.64461,-34.9275 34.9275,-34.9275 19.28289,0 34.9275,15.64461 34.9275,34.9275 z"
/>
</svg>
</div>
<div id="itemCountForCart">100</div>
<div class="cartCornerTextBestellen">Bestellen</div>
</div>
</a>
</body>
</html>
I have a div element with all of my content in it, including a video at the bottom of the page. My issue is, when I try to scroll down to see the video, it only reaches about half of it, and refuses to scroll down any further.
<html>
<head>
<link rel="shortcut icon" href="Images/favicon.ico" />
<link rel="stylesheet" type="text/css" href="Style.css" media="screen" />
<title>Arthur</title>
<meta content="text/html" charset="windows-1251">
</head>
<Body background="Images/background2.jpg">
<IMG class="imgborder" src="Images/button.png" align="left" height="50">
<div id="wrapper" style="background-color:black; width:60%; margin-left: auto ; margin-right: auto ;">
<center><img width="60%" src="Images/logo2.png"></center>
<BR><BR>
<center><img class="imgborder" height="300" src="Images/muller.jpg"></center>
<Font size="5" color="crimson" face="Calibri">
<Center><P align="justify">... </P>
<P align="justify">...</P>
<P align="justify">...</P></Font></Center>
<Center><iframe width="640" height="360" src="http://www.youtube.com/embed/DooYpt9Gu1s" frameborder="5"
allowfullscreen></iframe></Center>
<Font size="5" color="crimson" face="Calibri"><P>Thomas Muller</P></font>
</div>
</body>
</html>
And here's the CSS:
#charset "utf-8";
/* CSS Document*/
/*This section is for links*/
a:link
{
font-weight:normal; color:crimson
}
a:visited
{
font-weight:normal; color:Crimson;
}
a:hover
{
font-weight:bold; color: Royalblue; font-variant:small-caps;
}
/*This section is for a paragraph section*/
p {
font-style:normal; font-size:18px;
}
blue {
color:crimson;
}
/*This section is for the image's black border.*/
.imgborder {
border-color: crimson; border:thick; border-style:outset;
}
.body
{
background-color: #0000FF;
}
html , body{height:100%;}
#wrapper {
margin: 0 auto;
width: 990px;
height:100%;
overflow:hidden;
position:relative;
}
#navigation {
margin: 0 auto;
width: 990px;
height: 55px;
background-color: #fff;
}
#bottomHalf {
margin: 0 auto;
width: 990px;
height: 100%;
background-color: #4d3c37;
}
div { /* set div to full width and height */
width: 100%;
height: 100%;
}
p {
margin-left:2cm; margin-right:2cm;
}
You need to remove the overflow:hidden; from your #wrapper class.
Also, you are using many elements and attributes that are deprecated and not supported anymore as of HTML5, such as <center> and <font> (as well as attributes like align), I'd advise replacing these with their CSS equivalents.
I was trying to use font icons in IE7+8 and ran into a problem that could easily be solved by an IE7 only stylesheet. Long story short, now both IE7 and IE9 run my IE7 only stylesheet somehow (IE8 runs perfectly fine). I can't understand why.
<head>
<!-- CSS3 in IE7+8 -->
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="js/selectivizr.js"></script>
<noscript><link rel="stylesheet" href="css/style.css" /></noscript>
<![endif]-->
<!-- META -->
<meta charset="utf-8" />
<!-- TITLE -->
<title>title</title>
<!-- STYLESHEETS -->
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/normalize.css" />
<link rel="shortcut icon" href="img/favicon.ico" />
<!-- Icomoon in IE7 / IE7.CSS -->
<!--[if lte IE 7]>
<script src="js/lte-ie7.js"></script>
<link rel="stylesheet" href="css/ie7.css" />
<![endif]-->
<!--FONTS-->
<link href='http://fonts.googleapis.com/css?family=Maiden+Orange' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="container">
<div id="header" role="banner">
<img src="img/logo.png" title="title" alt="" />
</div> <!-- end #HEADER -->
<div id="main" role="main">
<div class="left content">
<h2>WHAT WE DO</h2>
</div>
<div class="center content">
<h2>OUR SPECIALTIES</h2>
<ul>
<li><a aria-hidden="true" data-icon="f">WATER</a></li>
<li><a aria-hidden="true" data-icon="$">FIRE</a></li>
<li><a aria-hidden="true" data-icon="#">LIGHTING</a></li>
<li><a aria-hidden="true" data-icon="a">AUDIO</a></li>
<li><a aria-hidden="true" data-icon="!">TECH F/X</a></li>
</ul>
</div>
<div class="left content">
<h2>CONTACT US</h2>
<div class="info">
<p>Name</p>
<p>e: <span class="brown">email</span></p>
<p>p: <span class="brown">888-888-8888</span></p>
</div>
<div class="info">
<p>Name</p>
<p>e: <span class="brown">email</span></p>
<p>p: <span class="brown">888-888-8888</span></p>
</div>
</div>
</div> <!-- end #MAIN -->
<div id="footer" role="contentinfo">
<p>©</p>
</div> <!-- end #FOOTER -->
</div> <!-- end #CONTAINER -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</body>
</html>
CSS
#font-face {
font-family: 'icomoon';
src:url('/fonts/icomoon.eot');
src:url('/fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('/fonts/icomoon.woff') format('woff'),
url('/fonts/icomoon.ttf') format('truetype'),
url('/fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
/* UNIVERSAL
=================================*/
body {
background-color: #292929;
background: url("/img/bg.png") repeat;
font-family: 'Droid Sans', Arial, Helvetica, sans-serif;
font-size: 62.5%; /* 1em = 10px */
-webkit-font-smoothing: antialiased;
}
#container {
width: 960px;
margin: 0 auto;
}
h2 {
display: inline-block;
font-family: 'Maiden Orange', cursive;
font-size: 3.5em;
font-weight: 100;
color: #3c2811;
padding: 0 0 2px 0;
border-bottom: 1px #3c2811 solid;
}
a,
.center a:hover {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
p {
color: #fff;
}
a,
.brown,
.center a:hover {
color: #3c2811;
}
li {
list-style: none;
margin: 0 0 20px 10px;
}
/* HEADER
=================================*/
#header {
background: url("/img/ribbon.png") no-repeat center;
height: 99px;
margin: 60px 0 0 0;
position: relative;
}
#header img {
display: inline-block;
position: absolute;
top: 13%;
left: 35%;
}
/* MAIN
=================================*/
#main {
overflow: hidden;
}
#main div:first-child h2 {
margin-left: 65px;
}
#main div:nth-child(2) h2 {
margin-left: 40px;
}
#main div:last-child h2 {
margin-left: 65px;
}
.content {
margin: 20px 0 0 0;
float: left;
height: 439px;
width: 320px;
}
.left {
background: url("/img/left-bg.png") no-repeat;
}
.left p {
font-size: 2em;
margin: 0 40px 0 20px;
line-height: 1.9;
}
/* CENTER */
.center {
background: url("/img/center-bg.png") no-repeat;
}
.center a {
color: #fff;
font-size: 3em;
-webkit-transition: color 0.15s ease-in;
-moz-transition: color 0.15s ease-in;
transition: color 0.15s ease-in;
}
[data-icon]:before {
font-family: 'icomoon';
content: attr(data-icon);
speak: none;
padding: 0 30px 0 0;
}
/* CONTACT */
.info {
margin: 0 0 30px 0;
}
.info p:first-child {
padding: 0 0 10px 0;
}
.info p:nth-child(n+2) {
font-size: 1.7em;
line-height: 1.5;
}
/* FOOTER
=================================*/
#footer {
text-align: center;
font-family: 'Maiden Orange';
font-size: 2.4em;
margin: 0 0 20px 0;
}
What is before your <head> tag? Incorrect markup might trigger quirks mode or compatibility mode.
Try explicitly asking IE to render your page with the latest rendering engine available by adding this tag inside <head></head>:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
As #Phil mentioned, it could be quirks mode is triggering this. Too specific DOCTYPE tend to trigger it. To avoid triggering quirks mode with DOCTYPE, don't be specific. Use:
<!DOCTYPE html>
HTML5 for the win!