I have this very simple web that I developed. I used all the codingand tips provided in similar questions here but with no luck. The web runs ok and its validated, but divs do not resize to fit phones. Can anybody give it a quick look and give me some pointers? much appreciated.
Here is the HTML code:
#import url(//db.onlinewebfonts.com/c/03af38e6d90add293d43f1ef74ce755f?family=Adieu+Light);
#font-face {
font-family: "Adieu Light";
src: url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.eot");
src: url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.eot?#iefix") format("embedded-opentype"), url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.woff2") format("woff2"), url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.woff") format("woff"), url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.ttf") format("truetype"), url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.svg#Adieu Light") format("svg");
}
.body, html {
height: 100%;
margin: 0;
background-image: url("Home-bck.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.full {
padding: 0;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%)translateY(-50%)
}
.tromper {
display: flex;
justify-content: center;
margin-top: auto;
margin-bottom: 0px;
color: #686868;
font-family: adieu light;
font-size: 28px;
}
.better {
display: flex;
justify-content: center;
margin-top: -39px;
color: #707070;
font-family: Adieu light;
}
.social ul {
display: flex;
position: absolute;
justify-content: center;
right: 50%;
left: 44%;
list-style: none;
}
.social ul li {
margin-top: 0;
margin-right: 15px;
margin-left: 15px;
margin-bottom: 30px;
}
.social ul li .fa {
font-size: 70px;
line-height: 60px;
color: #626262;
}
.social ul li .fa-instagram:hover {
color: #bfeefd;
transition: .5s;
transform: translate(0, -10px) rotate(360deg);
}
.social ul li .fa-linkedin:hover {
color: #bfeefd;
transition: .5s;
transform: translate(0, -10px) rotate(360deg);
}
.Contact {
display: flex;
justify-content: center;
margin-top: 70px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0;
color: #626262;
font-family: Adieu Light;
font-size: 24px;
}
.clients {
display: flex;
justify-content: center;
}
/* Media Queries: Tablet Landscape */
#media screen and (max-width: 1060px) {
#primary { width:67%; }
#secondary { width:30%; margin-left:3%;}
}
/* Media Queries: Tabled Portrait */
#media screen and (max-width: 768px) {
#primary { width:100%; }
#secondary { width:100%; margin:0; border:none; }
}
img { max-width: 100%; height: auto;
}
#media (min-device-width:600px) {
img[data-src-600px] {
content: attr(data-src-600px, url);
}
}
#media (min-device-width:800px) {
img[data-src-800px] {
content: attr(data-src-800px, url);
}
}
html { font-size:100%; }
#media (min-width: 640px) { body {font-size:1rem;} }
#media (min-width:960px) { body {font-size:1.2rem;} }
#media (min-width:1100px) { body {font-size:1.5rem;} }
<!DOCTYPE html>
<html>
<head>
<style></style>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="HandheldFriendly" content="true">
<meta charset="utf-8">
<title>Tromper&Tromper</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://db.onlinewebfonts.com/c/03af38e6d90add293d43f1ef74ce755f?family=Adieu+Light" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="full container">
<div class="tromper">
<h1>TROMPER&TROMPER</h1>
</div>
<div class="better">
<h3>"BETTER TOGETHER"</h3>
</div>
<div class="social">
<ul>
<li>
<a href="https://www.instagram.com/tromperandtromper/?hl=es" target="_blank">
<i class="fa fa-instagram"></i>
</a>
</li>
<li>
<a href="https://www.linkedin.com/company/tromper-and-tromper-works" target="_blank">
<i class="fa fa-linkedin"></i>
</a>
</li>
</ul>
</div>
<a href="mailto:whatever#whatever.com" style="text-decoration:none" target="_blank">
<div class="Contact">
<h4>CONTACT US</h4>
</div>
</a>
<div class="clients"></div>
</div>
</body>
</html>
The reason of your div is not resizable it's because h1 tag.
You can try modify your css file with this:
/* Media Queries: Tabled Portrait */
#media screen and (max-width: 768px) {
#primary { width:100%; }
#secondary { width:100%; margin:0; border:none; }
h1 {font-size: 7vw;} /* <- HERE */
}
However, your code isn't semantic. Try to improve this with the time.
I would comment as I am not sure if this is the right answer, but unfortunetly I am not allowed to.
I don't want to offend you or your experience level but it seems like you do not know how css works? Or maybe you just copied without looking.
You use the media queries to make the website responsive pretty much. Depending on your needs of course.
The easiest way to make divs respeonsive is giving them a width with %. So if you give them lets say 90% they will only get 900px wide when the screen (or window) is 1000px etc.
When you use media queries, because maybe the divs need to be smaller or bigger or you use absolute numbers (like pixel or so) you also need to use your classes and IDs.
Right now in your media queries I see two IDs "primary" and "secondary" because with # you declare this is an ID and in your HTML I dont see any IDs at all. So how is the browser supposed to know, where to apply your CSS?
Now, I dont claim to be a professional CSS user, so it is possible that "#primary" is some sort of special command, but as of right now, I would say there is at least one of your problems.
You also use alot of flex and I dont really know why? You could also work a bit on your HTML, using containers, sections, articles and such, but thats another story.
i agree with bibleblade, and i would like to add that its pretty weird that you use "screen" and sometimes just dont add it. maybe try to be a bit more consistent with that. and plus, by adding "screen" youre stating that this will only look like this, if its on a screen, so it wont work on a printer, which is pretty unnecessary, so i would just remove the "screen" so it defaults to "all" and the last media queries at the bottom for the font-size. are unnecessary, since you could just make the font-size relative to the screen via vw or vh or just use something like clamp
Related
I am trying to make one css file for all mobile screen sizes, however on google the media query won't be recognised by smaller phone screens. It works for pixel 2 xl, iphone 6, 7 and 8 PLUS and iphone X. I'm also trying to target pixel 2, iphone 6,7 and 8 and 5 so I added min-device width to be 320 px.But the browser won't recognise any of the mobile.css code.
here is my head tag -
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SHEK LEUNG | MA</title>
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
<link rel="stylesheet" href="/css/style.css">
<link rel='stylesheet' media='only screen and (min-device-width:320px) and (max-device-width: 850px) and (-webkit-device-pixel-ratio: 3) and (-webkit-device-pixel-ratio: 2)' href='css/mobile.css' />
</head>
CSS
.nav-button-h {
position: relative;
display: flex;
justify-content: space-between;
height: 20vh;
width: 100vw;
top: 40%;
/* left: 0.5rem; */
z-index: 100;
font-family: Helvetica, sans-serif;
font-size: 1.5rem;
}
#logo-center {
display: none;
}
.mobile-logo {
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
font-family: Helvetica, sans-serif;
font-weight: bold;
width: 1.5rem;
}
#projbtn {
align-self: center;
}
.nav-button-v {
font-size: 1.5rem;
}
.openPress {
-webkit-transform: translate3d(100vw, 0, 0);
transform: translate3d(100vw, 0, 0);
transition: transform 1s;
}
.openAbout {
-webkit-transform: translate3d(-100vw, 0, 0);
transform: translate3d(-100vw, 0, 0);
transition: transform 1s;
}
/* press page */
.press-container {
width: 100vw;
}
.img-grid {
margin-top: 6vh;
margin-left: -30vw;
padding: 1rem;
}
.press-info {
width: 70vw;
height: 47vh;
}
.fixed-wrapper {
left: 173vw;
height: 20vh;
}
.contact-wrapper {
height: 20vh;
}
.back_home {
display: block;
position: fixed;
z-index: 2;
font-family: Helvetica, sans-serif;
font-size: 1.5rem;
color: black;
background-color: white;
text-transform: uppercase;
font-weight: bold;
}
.press__mobile {
margin-left: 75vw;
margin-top: 90vh;
}
.fixed-wrapper {
top: 5vh;
}
.contactbtn {
float: left;
font-size: 1.4rem;
}
.contact-wrapper ul {
background-color: rgba(255, 255, 255, 0.829);
color: black;
margin-top: 3vh;
width: 60vw;
height: 18vh;
margin-left: -45vw;
text-align: center;
justify-content: flex-start;
padding: 1rem;
pointer-events: none;
}
.contact-wrapper a {
color: white;
}
/* about page */
.about-container {
width: 100vw;
left: -100vw;
}
this line of code is invalid:
<link rel='stylesheet' media='only screen and (min-device-width:320px) and (max-device-width: 850px) and (-webkit-device-pixel-ratio: 3) and (-webkit-device-pixel-ratio: 2)' href='css/mobile.css' />
you should add your media queries inside a css file ( probably inside your mobile.css )
#media only screen and (min-width: 320px) {
.class{
background-color: green;
}
}
In order to achieve this you will need to add the media query into the mobile.css file not on the HTML link declaration.
You need to wrap the contents of the mobile.css file with the media query; like below:
#media only screen and (min-device-width:320px) and (max-device-width: 850px) and (-webkit-device-pixel-ratio: 3) and (-webkit-device-pixel-ratio: 2) {
//contents of your mobile.css file goes here
}
The way you're doing your css is completely incorrect.
First, you have absolutely no media queries. Your media queries should simply be setup for min-width, nothing else. No max-width, nothing. Those need to be within your css file, not in the link element.
Responsive design should only and I mean ONLY be done with mobile-first dimensions using min-width media queries. As the width dimension increases beyond a certain point, then you add the next media query for the next largest width.
This is such a simple concept that I have been seen hundreds of people not understanding over the last 6-7 years. One company I worked for briefly a while back, after I came in I had to completely re-write their entire css stack to support these basic rules and ultimately fix most of the problems they were having.
I recommend looking at how Bootstrap started doing their media queries about 4-5 years ago. I'm not up to speed on what the framework is doing in the current version but they were moving in the right direction back then.
Generally, and this is purely from memory, the preferable min-width sizes are: 320px, 480px, 768px, 1024px, and 1200px. This should account for portrait and landscape modes for all mobile and tablet devices, moving up into desktop widths. Adjust as needed.
I have a good enough knowledge of HTML, but I am just stuck with something related to my responsive design HTML CSS code. I was following the W3 Schools webpage showing how to create a Navbar for a website (Link).
Here is my current CSS file and index.html:
body {
background-color: #FAEBD7;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
/* Add a black background color to the top navigation */
.top-navbar {
position: relative;
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.top-navbar a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.top-navbar a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.top-navbar a.active {
background-color: #4CAF50;
color: white;
}
/* Centered section inside the top navigation */
.top-navbar a {
/* float: none; */
/* position: absolute; */
/* top: 50%; */
/* left: 50%; */
/* transform: translate(-50%, -50%); */
}
/* Responsive navigation menu - display links on top of each other instead of next to each other (for mobile devices) */
#media screen and (max-width: 600px) {
.top-navbar a {
float: none;
display: block;
}
.topnav-centered a {
position: relative;
top: 0;
left: 0;
transform: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FUBS</title>
<meta name="description" content="Elder Scrolls, Fallout, Information, Wiki">
<link rel="stylesheet" href="css/mystyle.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="top-navbar">
<a class="active link" href="index.html">Home</a>
<a class="link" href="scrolls/index-scrolls.html">The Elder Scrolls</a>
<a class="link" href="fallout/index-fallout.html">Fallout</a>
</div>
<div class="test-div">
</div>
<div style="padding:0 16px;">
<br />
etc. etc. etc.
</div>
</body>
</html>
If you run the above code snippet you will get an idea of what I want it to do (If you drag your window smaller you will see the change).
Basically, what I just want to do is to have the nav bar links to be centered (Along with the black bar that goes across the screen). I already have it so that when the screen size if below 600 pixels, it switches to that effect.
I narrowed down the part of the tutorial that was making my nav bar disappear. It has the above from the #media part of the CSS (You will see that it is commented out). In the tutorial, the centered part of the class topnav-centered had only one element, an a tag. Maybe because in my website it has more than one element in the class that it is refusing to work? That is just my guess though.
Any help with this would be appreciated.
The reason the items aren't centered is because the a tags are floated to the left, this will always force them to the left.
To fix this you just need to amend the 2 classes below, adding text-align: center; as well as removing the float and setting your links to display: inline-block; will allow you to control their position.
/* Add a black background color to the top navigation */
.top-navbar {
text-align: center;
position: relative;
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.top-navbar a {
float: none;
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
[Picture of the problem, text and img don't align][1]
Here are my HTML & CSS file.
As far as I can tell I am missing some information on how to have the documents body and the inline flexbox act together. I thought this mobile specific meta would be enough to help the webpage fluctuate.
body {
font-family: 'Montserrat', sans-serif;
text-align: center;
}
h3 {
text-transform: uppercase;
letter-spacing: .5em;
margin: 5px;
}
h4 {
margin-top: 100px;
margin: 5px;
}
img {
cursor: pointer;
margin: 50px;
border: 3px solid darkgrey;
cursor: default;
}
hr {
border-width: 2;
border-top: 2px solid lightgray;
max-width: 960px;
}
.title {
margin: 6%;
}
.nav-item {
margin-left: .5rem;
margin-right: .5rem;
font-size: 1.5rem;
text-decoration: none;
color: rgb(142, 152, 161);
}
#verticalline {
margin: 3%;
}
#edu-exp {
display: flex;
margin: 3%;
}
#imageflex {
display: inline-flexbox;
}
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="AlStyle.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="FAVICON.jpg">
</head>
<body>
<div id='imageflex'>
<!-- IMA Educateboiiii
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div>
<img src="http://homepages.cae.wisc.edu/~ece533/images/airplane.png" alt="Mountains." />
</div>
<div>
<p>Annapurna Base Camp Summit Trail (4200M) This one was a tough one, luckily cheech and chong had my back</p>
</div>
<div>
<img src="http://homepages.cae.wisc.edu/~ece533/images/airplane.png" alt="Desert." />
<p>Volcano Mt. Rinjani, Idonesia (4100M) Jumping into the sulfur hot springs in the crater was the bees knees. </p>
</div>
<div>
<img src="http://homepages.cae.wisc.edu/~ece533/images/airplane.png" alt="Self Portrait." />
<p>Machhapuchhre Base Camp, Nepal (4200M) It was pretty chilly and there were several avalanches but we made it.</p>
</div>
<div>
<img src="http://homepages.cae.wisc.edu/~ece533/images/airplane.png" alt="Desert." />
<p id="PM">Pyramid Moutain, Jasper National Park, Canada. We had a good few days trekking through the park.</p>
</div>
</div>
</body>
</html>
Any feedback would be greatly appreciated!
If you want to make a responsive application, I would suggest that you look into Bootstrap https://getbootstrap.com/, that is by far one of the easiest routs for someone just starting, or someone not familiar with media queries....like those show above.
Try this:
<style>
#media screen and (min-width: 980px) /* Desktop */ {
body {
..........
}
}
#media screen and (max-width: 979px) /* Tablet */ {
body {
.........
}
}
#media screen and (max-width: 500px) /* Mobile */ {
body {
.........
}
}
</style>
Try using this minimalist framework. These guys are great, they basically do the work for you in making it mobile friendly. However, this is a shortcut. To me it looks like you're not understanding how flexbox works. In that case, check this out. Understanding how these things work is exhausting, but worth it. I would use the minimalist framework, as a just in case.
I created a website last night that works in Chrome, Firefox, Safari and Opera, but it isn't working in Internet Explorer
I tried creating conditional styling and html5.shiv in the head tags. My code looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Flat Design</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
<link href="css/hover.css" rel="stylesheet" media="all">
<!--[if lt IE 9]>
<script src="dist/html5shiv.js" type="text/javascript"></script>
<script src="PIE.js" type="text/javascript"></script>
<style type="text/css">
.wrap {
width: 980px;
}
.logo {
float: left;
}
.main-nav {
float: right;
}
.main {
width: 40.425531914894%;
height: 900px;
margin: 0;
}
.secondary {
width: 36.170212765957%;
height: 900px;
margin-left: 15px;
}
.extra {
display: block;
width: 23.404255319149%;
height: 900px;
}
</style>
<![endif]-->
</head>
<body>
<div class="wrap">
<header class="main-header">
<a class="logo" href="#"><h2>My Experience in Web Development</h2> </a>
<nav class="main-nav">
<a link href="#" class="hover">Home</a>
<a link href="#" class="hover">About</a>
<a link href="#" class="hover">Clients</a>
<a link href="#" class="hover">News</a>
<a link href="#" class="hover">Contact</a>
</nav>
</header>
<div class="content">
<div class="main col">
<h3>My candid experience in trying to find a job as a Web Developer</h3>
<p>It hasn't been a dull moment ever since I decided to switch careers to web development.</p>
<p>I've taken up the arduous task of putting together a portfolio of several pieces of my best work. At the same time, I brushed up on my skillset by taking online courses at Team Treehouse and several YouTube tutorials, as well as utilized sites such as Stack Overflow, SitePoint, Six Revisions, etc.</p>
</div>
<div class="secondary col">
<h3>Hitting the pavement for a job in web development.</h3>
<p>In December of 2012, I decided to put my resume online to see what the job market was like in web development.</p>
<p>A month later,I landed an assignment at Web 4 Purpose as a jr. front end web developer.I handled all of the CSS,HTML,Javascript coding from wireframes done in Adobe Photoshop or drawn.<br></p>
</div>
<div class="extra col">
<h3>There's several web technologies.</h3>
<p>Here's a short list of the several web technologies out there:</p>
<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>Javascript</li>
<li>JQuery</li>
<li>Bootstrap </li>
<li>Foundation</li>
<li>Angular.js </li>
</ol>
<br>
</div>
</div>
<footer class="main-footer">
<img src="img/twitter.png" alt="Twitter" class="social-icon">
<img src="img/facebook.png" alt="Facebook" class="social-icon">
<img src="img/linkedin.png" alt="LinkedIn" class="social-icon">
<img src="img/youtube.png" alt="YouTube" class="social-icon">
<img src="img/googleplus.png" alt="Google Plus" class="social-icon">
<p>© 2014 michaellegemah.com</p>
</footer>
</div>
</body>
</html>
The CSS sheet is this:
* {
box-sizing: border-box;
}
body {
margin: 0;
padding-top: 25px;
background: #ECF0F1;
color: #FFF;
font: 1.3em/1.6 sans-serif;
}
.wrap {
margin: auto;
width: 90%;
}
.main-header {
background: #2C3E50;
text-align: center;
font-family: 'Lato', sans-serif;
font-weight: 900;
}
.logo,
.main-nav a {
display: inline-block;
color: #FFF;
text-decoration: none;
font-family: 'Lato', sans-serif;
font-weight: 900;
}
.main-nav a {
padding: 0 .75em;
border-right: 1px dotted;
color: #FFF;
font-size: .7em;
line-height: 1rem;
}
.main-nav a:hover {
text-decoration: underline;
}
.main-nav a:last-child {
border-right: none;
}
.content,
.main-header {
overflow: hidden;
}
.col {
height: auto;
}
.main {
background: #3498DB;
font-family: 'Lato', sans-serif;
}
h3 {
font-weight: 900;
}
li a, a {
text-decoration: none;
color: #FFF;
font-weight: 900;
}
.secondary {
background: #2ECC71;
font-family: 'Lato', sans-serif;
}
.extra {
display: none;
background: #C0392B;
font-family: 'Lato', sans-serif;
}
.main-footer {
background: #95A5A6;
font-family: 'Lato', sans-serif;
}
.social-icon {
width: 40px;
height: 40px;
margin: 0 5px;
border: none;
}
.main-header,
.main-footer,
.col {
margin-bottom: 15px;
padding: 2.15%;
border-radius: 5px;
}
/* ==========================================================================
Media Queries
========================================================================== */
/* Phones to Tablets */
#media only screen and (min-width: 481px) {
.col {
float: left;
}
.main {
width: 65.957446808511%;
height: 900px;
}
.secondary {
width: 31.914893617021%;
height: 900px;
}
.secondary,
.extra {
margin-left: 2.127659574468%;
}
}
/* Tablets to Desktop */
#media only screen and (min-width: 769px) {
.logo {
float: left;
}
.main-nav {
float: right;
}
.main {
width: 40.425531914894%;
height: 900px;
}
.secondary {
height: 900px;
}
.extra {
display: block;
width: 23.404255319149%;
height: 900px;
}
}
#media only screen and (min-width: 1024px) {
.wrap {
width: 980px;
}
}
Unfortunately, the result has been this: http://flatdesign.originexample.site90.com which looks fine in all browsers except IE
If anyone sees anything I might have overlooked, or if there's a better solution, please let me know thanks
Using the IE11 developer-tools emulator to mimick IE8, I'm seeing two main differences:
no rounded corners;
columns aren't floating side-by-side;
The border radius can't be fixed easily and doesn't really affect performance, so I hope you're okay with ignoring that.
The column floats are what's making it look really ugly, and thankfully that's easy to fix.
You're creating your columns with the following rule:
#media only screen and (min-width: 481px){
.col {
float: left;
}
}
The problem is the "only" keyword. That keyword is designed to prevent browsers that don't recognize media queries from applying that style. That includes IE8. It reads it as a media query for a media type named "only"; it doesn't recognize that type, so it doesn't apply the style. If you remove the keyword:
#media screen and (min-width: 481px){
.col {
float: left;
}
}
Then IE8 reads that as #media screen blah,blah,blah. It ignores the stuff it doesn't understand and applies the rule to all screens regardless of their width.
For IE8, that's probably okay, since nobody's using IE8 on a handheld device. And if their screen is too narrow, that's okay since it just means the floated elements will end up one after another, the way they are without the floats.
It's possible that the change will also affect some older handheld devices that don't recognize min-width type media queries, but again, floats are pretty flexible.
One more thing: even when I added in a float property to your columns, the third column wasn't fitting in a row with the others. Two possible culprits: either IE8 is automatically adding in padding or margins somewhere you're not expecting, or they are rounding lengths up to the next pixel and that's throwing off your addition. A little bit of playing around with those settings should get them all side-by-side. If you make your last column float right instead of left, you can get away with making the margins slightly smaller without ruining the rectangular lines of the design.
I'm very new to html and css so feel free to critique any bad practices you see in the code below...
I am trying to create a centered column that's 800 pixels across and the banner will be resized to 800 pixels. When view this page in chrome or firefox it looks great. When I view it in IE8 the font is huge, there is a giant empty spot on the right side of the banner all the way down to the bottom, and the size of the "container" will not change no matter what I do in the css file.
CSS:
body {
font-family: Arial;
font-size: small;
background-color: #FFFFFF;
background-image: url(../images/victorianBackground.jpg);
background-position: top;
background-repeat: repeat;
color: #000000;
}
#container {
margin: -10 auto;
background-color: #D3CDBA;
text-align: left;
}
html>body #container {
width: 800px;
min-height:800px;
padding: 0 0px;
}
#banner {
width:800px;
}
#banner img {
width:800px;
padding:45 0px;
}
#content {
width:500px;
padding: 15px;
background-color: transparent;
}
/* Navigation */
#navigation ul {
list-style-type: none;
width: 800px;
margin: 0;
padding: 0;
}
#navigation li {
float: left;
background-color: #D3CDBA;
}
#navigation li:hover {
float: left;
color: #4676A4;
background-color: #D3CDBA;
}
#navigation a {
font-weight: bold;
text-decoration: none;
color: #000000;
display: block;
padding: 5px;
}
#navigation a:hover {
font-weight: bold;
text-decoration: none;
color: #992332;
}
#content a {
color:teal;
}
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Park Avenue Neighborhood Association</title>
<meta name="keywords" content="Park Avenue Neighborhood Association Syracuse New York"/>
<link rel="stylesheet" type="text/css" href="../styles/style1.css">
</head>
<body>
<div id="container">
<div id="banner">
<img src="../images/banner.jpg" id="banner">
<br/>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>History</li>
<li>Houses</li>
<li>Local Business</li>
<li>Events</li>
<li>Contacts</li>
</ul>
</div>
<div id="content">
<h2>Content Header 1 </h2>
<p>Awesome Content </p>
<h2>Content Header 2 </h2>
<p>Awesome Content </p>
</div>
</body>
</div>
</html>
There are multiple issues I see with your source. Non-exhaustive list:
1) You need a doctype. Otherwise, browsers will render items in a non-standard way.
Example:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2) You have a <div> ending after the </body> tag. This is invalid.
Fix:
<p>Awesome Content </p>
</div>
</div>
</body>
</html>
3) You don't need the extra <br> in <div id="banner">.
Fix:
<div id="banner">
<img src="../images/banner.jpg" id="banner">
</div>
4) Now, if you want <div id="container"> to be centered and have a width of 800px, try the following.
Centering code that goes in your css (replaces existing):
body { text-align: center; }
#container {
text-align: left;
width: 800px;
margin: auto;
}
5) For your font-size declaration, you're using small. This will behave unpredictably. Instead, consider using either em or px for font size.
Font size with em:
body { font-size: 100%; line-height: 1.125em; }
#container { font-size: 0.875em; }
Font size with px:
body { font-size: 16px; line-height: 1.125em; }
#container { font-size: 12px; }
First thing I saw, you need to add this to the very first line of your HTML to force IE to render in standards mode, instead of quirks mode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
In regard to centering the banner, try adding the following:
in body selector:
text-align: center;
in banner:
margin-right: auto;
margin-left: auto;
In regard to font size try using em or % sizing.
Other than that just tackle the problems one at a time, fine tune the details incrementally. Throwing in everything all at once will only create confusion - chances are it wont work as expected, but will frustrate you.