I'm trying to make an online shop. I need 3 items in a row. I tried to do it by function but I see the cards under each other. How can I make a row of cards by 3 elements?
When I use flex the card doesn't look with the same design as now.
I think that the problem is with .product-item
Help me, please.
MY CSS:
* {
box-sizing: border-box;
border: 1px #e2e2e2;
}
.product-item {
width: 300px;
height:205px;
text-align: center;
border: 1px #e2e2e2;
background: white;
font-family: "Roboto";
}
.product-item img {
display: inline-block;
width: 100%;
border: 1px #e2e2e2;
}
.product-list {
background: #fafafa;
padding: 15px 0;
}
.product-list h3 {
font-size: 20px;
font-family: "Roboto";
text-align: left;
margin: 25px;
font-weight: 400;
color: #333333;
}
.product-list h4 {
font-size: 15px;
font-family: "Roboto";
text-align: left;
margin: 25px;
font-weight: 400;
color: #666666;
}
.sell {
font-size: 20px;
font-family: "Roboto";
color: #333333;
margin: 65px;
}
.price {
font-size: 35px;
text-align: left;
font-family: "Roboto";
color: #333333;
margin: -65px;
}
.cart img
{margin-top:-60px;
margin-left:200px;
width: 15%;
}
My HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Card set</title> <!-- Задаем заголовок документа -->
<link rel="stylesheet" type="text/css" href="cardset.css">
<script src="script.js"></script>
</head>
<body>
<div class="product-item">
<img src="boots.png">
<div class="product-list">
<h3>Ботинки женские</h3>
<h4>Модные ботинки из натурального нубука. Согреют Ваши ноги во время зимних морозов.</h4>
<p><span class = 'price'>1999</span><span class = 'sell'>руб.</span><div class="cart"><img a href="" src="cart.png">
</div>
</div>
<div class="product-item">
<img src="boots.png">
<div class="product-list">
<h3>Ботинки женские</h3>
<h4>Модные ботинки из натурального нубука. Согреют Ваши ноги во время зимних морозов.</h4>
<p><span class = 'price'>1999</span><span class = 'sell'>руб.</span><div class="cart"><img a href="" src="cart.png">
</div>
</div>
</body>
</html>
Try adding this to product-item class:
Width:33%;
Display:inline-block;
There are a lot of typography errors in your code (look at the class you are defining, look at the extra spaces, unclosed code sections in your CSS etc.)
To align three items, you can simply use flexbox display. Like in the example below.
section {
display:flex;
}
.itemmm img {
width:100px;
height:100px;
margin:25px;
}
<html>
<head>
<meta charset="UTF-8">
<title>Card set</title>
<!-- Задаем заголовок документа -->
<link rel="stylesheet" type="text/css" href="cardset.css">
<script src="script.js"></script>
</head>
<body>
<section class="items-container">
<div class="itemmm">
<img src="https://cdn.pixabay.com/photo/2015/03/26/09/41/chain-690088_960_720.jpg">
</div>
<div class="itemmm">
<img src="https://cdn.pixabay.com/photo/2015/03/26/09/41/chain-690088_960_720.jpg">
</div>
<div class="itemmm">
<img src="https://cdn.pixabay.com/photo/2015/03/26/09/41/chain-690088_960_720.jpg">
</div>
</section>
</body>
</html>
I'm new to web development and I'm trying to build a site using bootstrap 3. I want to use the grid layout for a section with three points but whenever I add it, the images overlap and are not centered when the browser is below the SM breakpoint.
Here is the HTML.
<!DOCTYPE html>
<html>
<head lang="en">
<!--Meta Data-->
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="Luke Bouch">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Always Ready Power</title>
<!--Styles-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <!--BootStrap CDN-->
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<nav class="topNav">
<div class="container">
<img class="navLogo centerMobile" src="assets/20200811-ARLogo-White.png" alt="two kids looking out the window">
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="hero col-xs-12">
<h1>Keep your family safe<br/><span class="newLine">with a whole house generator</span></h1>
</div>
</div>
<div class="horizonralLayout row">
<div class="col-sm-4">
<img src="assets/point1.png">
<h2>It's only a matter of time<span class="newLine">before your stuck without power</span></h2>
</div>
<div class="col-sm-4">
<img src="assets/point2.png">
<h2>It's only a matter of time<span class="newLine">before your stuck without power</span></h2>
</div>
<div class="col-sm-4">
<img src="assets/point3.png">
<h2>It's only a matter of time<span class="newLine">before your stuck without power</span></h2>
</div>
</div>
</div>
<!--Scripts-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>
And here is the CSS.
/* --- IMPORT --- */
#import url("https://use.typekit.net/ptx4dws.css");
/* --- MOBILE ---*/
/* Global */
h1 {
font-family: proxima-nova, sans-serif;
font-weight: 800;
font-style: normal;
text-transform: uppercase;
font-size: 4rem;
font-weight: 800;
}
h2 {
font-family: proxima-nova, sans-serif;
font-weight: 800;
font-style: normal;
text-transform: uppercase;
font-size: 3rem;
font-weight: 800;
}
.newLine {
display: block;
font-size: 2.2rem;
font-weight: 500;
}
p {
font-family: proxima-nova, sans-serif;
font-weight: 500;
font-style: normal;
}
a {
text-decoration: none;
color: black;
}
.break {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
.centerMobile {
display: block;
margin-left: auto;
margin-right: auto;
}
/* NavBar */
.topNav {
background-color: rgb(232, 19, 35);
}
.navLogo {
height: 80px;
margin: 10px auto 10px auto;
align-content: center;
}
.menuList {
list-style: none;
}
.topNav li {
padding: 5px 5px 5px 5px;
}
.topNav a {
color: white;
font-size: 1.7em;
}
.topNav a:hover {
text-decoration: none;
font-weight: 600;
}
/* Hero */
.hero {
padding: 25vw 5vw 25vw 5vw;
background-image: url(/assets/heroBG.png);
background-position: center;
background-size: cover;
}
.hero h1 {
text-transform: uppercase;
font-size: 4rem;
font-weight: 800;
}
.hero .newLine {
display: block;
font-size: 2.2rem;
font-weight: 500;
}
/* Horizontal Layout*/
.horizontalLayout .item {
padding: 10px 10px 10px 10px;
}
I really appreciate any help!
Two issues - first - you are not applying any styling for the xs- class -so it will be taking up the entire width (if you do not apply a column designation - the element will be at 100% of the width - as if you had col-xs-12.
If you still want the 3 images across - then you will need to apply a col-xs-4 to the divs with col-sm-4. Alternatively - you might want them to be different porpotional widths on the xs size - so you might want col-xs-6 col-sm-4" and have the images on two lines.
And second - you have a discrepancy in the code between the html class and the associatd styling - horizontalLayout needs to be updated in the html
//html
<div class="horizonralLayout row">
/css
/* Horizontal Layout*/
.horizontalLayout .item {
padding: 10px 10px 10px 10px;
}
And a suggestion - investigate the element for your images - its the right tool for displaying the content you are showing here.
<div class="col-xs-4">
<figure>
<img src="assets/point3.png">
<figcaption>
It's only a matter of time<span class="newLine">before your stuck without power</span>
</figcaption>
</figure>
</div>
it's pretty simple. If referenced everything popular, and I'm the exact same code as my video I'm watching so I'm not sure what's going on. What happens if if I click my dropdown menu, it doesn't drop down.
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="cox-md-12">
<ul class="nav nav-pills">
<li class="active">Index</li>
<li>Push Pull</li>
<li>Nesting</li>
<li>Dropdown<span class="caret"></span>
<ul class="dropdown-menu">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
My CSS code:
html{
position: relative;
width: 100%;
min-height: 100%;
}
body{
font-family: "Roboto";
margin-bottom: 60px;
}
a{
color:#00A0F0;
}
.spacer{
height:70px;
width: 100%;
}
.spacer-1{width:100%;height:10px;}.spacer-2{width:100%;height:20px;}.spacer-3{width:100%;height:30px;}.spacer-4{width:100%;height:40px;}
.spacer-5{width:100%;height:50px;}.spacer-6{width:100%;height:60px;}.spacer-7{width:100%;height:70px;}.spacer-8{width:100%;height:80px;}
.spacer-9{width:100%;height:90px;}.spacer-10{width:100%;height:100px;}.spacer-11{width:100%;height:110px;}.spacer-12{width:100%;height:120px;}
.locationTitle{
text-align: left;
font-weight: 700;
font-size: 2em;
color:#06a;
margin-bottom: 24px;
margin-left: 24px;
margin-top: 24px;
}
.subTitle{
text-align: center;
}
.subHead{
line-height: 1em;
font-size: .6em;
}
.navbar{
border: 0px solid #white;
border-bottom: 2px solid #CCC;
box-shadow: 0 0 2px 1px grey;
height: 100px;
background-color: white;
}
.navbar>.container-fluid{
height: 100px;
padding: 0;
}
.navbar>.container-fluid>*{
height: 100px;
}
.navbar>.container-fluid img{
height: 100px;
}
.branding *{
display: block;
text-align: center;
padding: 2px 6px 6px;
color: #06a
}
.navRows{
height: 100%;
padding: 0px;
}
.navRows>div{
font-size: 1.4em;
line-height: 40px;
padding: 5px 0;
text-align: center;
}
.navRows[data-expand="false"]>div{
height: 50%;
}
.navRows[data-expand="true"]>div{
background-color: #06a;
text-align: left;
z-index: 9999;
}
.contactspacer {
margin-top: 45px;
}
.navIcon{
padding: 10px;
border-radius: 50%;
color:white;
background-color: #06a;
}
.navTopRow{
background-color: #06a;
color: white
margin-top: 50px;
}
.navTopRow a{
margin-top: 25px;
color: white;
font-size: 16px;
}
.navbar > li > a:hover{
text-shadow: 0 1px 3px #CDF;
}
.navbar li:not(.navSep):hover{
margin: 0 0 -2px 0;
border-bottom: 2px solid white;
}
.navSep{
width:2px;
height: 40px;
margin: 5px 2px 5px 2px;
background-color: #A9AFDD;
}
.imgCon{
max-height: 100%;
max-width:100%;
}
.imgCon img{
width: auto;
height: auto;
max-width:100%;
max-height: 100%;
}
.page{
width: 100%;
height: 100%;
padding-bottom:50px;
}
#media (max-width:768px){
div[aria-expanded="true"] .navSep{
display: none;
}
}
.mainTitle{
font-size: 1.5em;
font-weight: 700;
background-color: white;
}
.extraInfo{
background-color: #333;
color:white;
box-shadow: 1px 1px 2px 1px grey;
font-size: 1.2em;
}
.footer{
background-color: #06a;
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
text-align: right;
}
.footer a{
text-align: center;
border-top: 1px solid grey;
height: 100%;
color: white;
}
.footer p{
text-align: center;
height: 100%;
color: white;
}
#media (min-width : 1200px) {
.col-xl-0{display:none;}
}
#media (max-width : 1200px){
.col-lg-0{display:none;}
}
#media (max-width : 992px){
.col-md-0{display:none;}
}
#media (max-width : 768px){
.col-sm-0{display:none;}
}
#media (max-width : 480px){
.col-xs-0{display:none;}
}
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
}
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
}
It is working if you pasted your CDN's correctly
As
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Then It will work perfectly as follows,
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="cox-md-12">
<ul class="nav nav-pills">
<li class="active">Index</li>
<li>Push Pull</li>
<li>Nesting</li>
<li>Dropdown<span class="caret"></span>
<ul class="dropdown-menu">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Check that you use the latest version of bootsrap
And check https://jsfiddle.net/qy59y2fs/
<div class="dropdown">
I created this website http://fusioninfinite.com/DianeFH/ with the hope that it would display correctly on mobile devices. While it looks fine on my PC I have tested it on my IPod and the header, navbar, and footer background colors do not extend to the rest of the page when you scroll. I think it's a problem with the width being 100% but I am not sure
This is my HTML code I am using bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Diane Swanson's website, online gallery and blog">
<meta name="author" content="Diane Swanson">
<meta name="keywords" content="diane, swanson, Diane Swanson, artist, freehawk art, art, freehawk, watercolor, visual artist, American Women Artists, artist, painting, landscapes">
<link rel="icon" href="../../favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
<title>Diane Swanson - Home</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="blog.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div style="width:100%; background-color:#303030; class="blog-masthead">
<div align="center" style="width:100%; height:120px; background-color:#0b0b3b;">
<div style="width:740px; padding-top:40px;" align="left">
<h1 style="font-size:45px; font-family: 'Muli', sans-serif; color:lightgrey;">Diane Swanson</h1>
</div>
</div>
<div style="width:790px;" align="left" class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="index.html">Home</a>
<a class="blog-nav-item" href="about.php">About</a>
<a class="blog-nav-item" href="exhibits.html">Current & Upcoming Exhibits</a>
<a class="blog-nav-item" href="portraits.html">House Portraits</a>
<a class="blog-nav-item" href="gallery.html">Gallery</a>
<a class="blog-nav-item" href="wordpress/index.php">Blog</a>
</nav>
</div>
</div>
<div class="container">
<div style="margin-top:20px;" align="center">
<img src="images/homeheader.jpg">
<br><br><br>
<h2 style="float:left; color:#000066;"><strong>DIANE SWANSON</strong></h2>
<h2 style="float:right; color:#000066; font-style: italic;">visual artist</h2>
<br><br><br>
<h4>Landscapes — Home/Building Portraits — Animal Portraits — Illustration</h4>
<br><br><br>
</div>
</div><!-- /.container -->
<div style="left:0; right:0;" class="blog-footer">
<p>Website designed and hosted by FusionInfinite WebDesign and Hosting</p>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/docs.min.js"></script>
</body>
</html>
This is my CSS:
/*
* Globals
*/
body {
font-family: Georgia, "Times New Roman", Times, serif;
color: #555;
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
margin-top: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
color: #333;
}
/*
* Override Bootstrap's default container.
*/
.container {
width: 790px;
}
/*
* Masthead for nav
*/
.blog-masthead {
background-color: #428bca;
-webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
}
/* Nav links */
.blog-nav-item {
position: relative;
display: inline-block;
padding: 10px;
font-weight: 500;
color: #cdddeb;
}
.blog-nav-item:hover,
.blog-nav-item:focus {
color: #fff;
text-decoration: none;
}
/* Active state gets a caret at the bottom */
.blog-nav .active {
color: #fff;
}
.blog-nav .active:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
content: " ";
border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent;
}
/*
* Blog name and description
*/
.blog-header {
padding-top: 20px;
padding-bottom: 20px;
}
.blog-title {
margin-top: 30px;
margin-bottom: 0;
font-size: 60px;
font-weight: normal;
}
.blog-description {
font-size: 20px;
color: #999;
}
/*
* Main column and sidebar layout
*/
.blog-main {
font-size: 18px;
line-height: 1.5;
}
/* Sidebar modules for boxing content */
.sidebar-module {
padding: 15px;
margin: 0 -15px 15px;
}
.sidebar-module-inset {
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child {
margin-bottom: 0;
}
/* Pagination */
.pager {
margin-bottom: 60px;
text-align: left;
}
.pager > li > a {
width: 140px;
padding: 10px 20px;
text-align: center;
border-radius: 30px;
}
/*
* Blog posts
*/
.blog-post {
margin-bottom: 60px;
}
.blog-post-title {
margin-bottom: 5px;
font-size: 40px;
}
.blog-post-meta {
margin-bottom: 20px;
color: #999;
}
/*
* Footer
*/
.blog-footer {
padding: 40px 0;
color: #999;
text-align: center;
background-color: #f9f9f9;
border-top: 1px solid #e5e5e5;
}
.blog-footer p:last-child {
margin-bottom: 0;
}
To make your website responsive, you are using Bootstrap, which is great, but you are using it incorrectly. By overwriting bootstrap's default CSS, it will only break it, as I said earlier. What you want to do is include your own DIVs or custom classes and apply the CSS to these.
Speaking of CSS, I would recommend to avoid inline CSS, in the style attribute, and to regroup all your CSS in a single stylesheet. It will be easier for you to edit your website afterwards. In my example, I added a lot of custom classes.
Also, don't use BR tag, except to break a line for text inside a P tag. In order to define spaces around an element, use MARGIN or PADDING
Next, I noticed that you compressed your website's content, or content container in this case to 790px. Nowadays, most screen resolution tends to be between 1920px and 1280px, excluding mobile and tablet resolution of course. By compressing, you are: 1) breaking bootstrap, 2) containing your content to the middle of the page and therefore leaving huge empty gaps to each sides for users with higher resolution screens.
Using bootstrap is great, but using it efficiently is better. Don't be afraid to use bootstrap to it's full potential. When looking at my take on the Html, notice how I abused DIV containers and added all of boostrap's own row and columns DIVs. When resizing the browser window, you will notice that all elements will follow and place itself on top of each other when there is no more room for elements to be side by side.
In the stylesheet, I added a bit of Media Queries. What this do is simple, it checks if the browser's width reached the threshold I specified. If it does, the I can target specific elements and apply additional CSS style. If the browser's width returns to normal, the additional CSS is removed.
For some reason unknown, I cannot create a Bootply example for you at the moment. But you can try to test it by adding my code and click Play to see how it looks and react to resizing. Bootply Website
If you have any questions, don't hesitate
Here is the complete html:
<div class="header">
<div class="container name-container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h1>Diane Swanson</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<nav class="blog-nav">
<ul>
<li><a class="blog-nav-item active" href="#">Home</a></li>
<li><a class="blog-nav-item" href="#">About</a></li>
<li><a class="blog-nav-item" href="#">Current & Upcoming Exhibits</a></li>
<li><a class="blog-nav-item" href="#">House Portraits</a></li>
<li><a class="blog-nav-item" href="#">Gallery</a></li>
<li><a class="blog-nav-item" href="#">Blog</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<div class="content-container">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<img class="blog-img" src="http://fusioninfinite.com/DianeFH/images/homeheader.jpg" alt="">
</div>
</div>
</div>
<div class="container middle-container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 leftbox">
<h2>Diane Swanson</h2>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 rightbox">
<h2>Visual artist</h2>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 description-container">
<h4>Landscapes — Home/Building Portraits — Animal Portraits — Illustration</h4>
</div>
</div>
</div>
</div>
<div class="blog-footer">
<p>Website designed and hosted by FusionInfinite WebDesign and Hosting</p>
</div>
Here is the CSS:
.header{
width: 100%;
background-color: #303030;
}
.header h1{
font-size: 45px;
font-family: 'Muli', sans-serif;
color: lightgrey;
margin-left: 8px;
}
.name-container{
padding-top: 25px;
}
.blog-nav ul{
margin: 0;
padding: 0;
}
.blog-nav li{
float: left;
}
.blog-nav-item{
position: relative;
display: inline-block;
padding: 10px;
font-weight: 500;
color: #cdddeb;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
}
.blog-nav-item:hover{
text-decoration: none;
color: #FFF;
}
.active{
color: #fff;
}
.blog-nav .active:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
content: " ";
border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent;
}
.blog-img{
max-width: 100%;
width: 1170px;
}
.content-container{
padding-top: 25px;
padding-bottom: 65px;
}
.middle-container{
padding-top: 10px;
}
.description-container{
text-align: center;
padding-top: 10px;
}
.leftbox h2{
color: #000066;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
text-transform: uppercase;
}
.rightbox h2{
float: right;
color: #000066;
font-style: italic;
}
.blog-footer{
padding: 40px 0;
color: #999;
text-align: center;
background-color: #f9f9f9;
border-top: 1px solid #e5e5e5;
}
/*MEDIA QUERIES*/
#media only screen and (max-width:770px) {
.rightbox h2{
float: none;
}
}
#media only screen and (max-width:585px) {
.blog-nav li {
float: none;
}
.blog-nav .active:after{
display: none;
}
}
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!