Need Help Please! Options

[thenoesis]

I am really confused and frustrated right now. On my about page with will switch between the old CSS that was changed and the current CSS. I don't understand why this is happening. When I do a hard refresh it works but this happens still on computers that haven't viewed the site also so does anyone have any idea why this is?

http://www.iphoto.fragmentedmemories.net/about.html

css

CODE

article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{ display: block; }
mark, rp, rt, ruby, summary, time{ display: inline; }

.header {clear: both top: 0px; margin: 0 auto; text-align: left; letter-spacing: 0px;}

.body {clear: both; margin: 0 auto; top: 0px; width: 902px;}

.content {clear: both; top: 0px; width: 902px;}


*{
margin: 0;
padding: 0;
}

body{
background: #14baba url("http://www.iphoto.fragmentedmemories.net/images/bg.png") repeat-x;
font-family: Century Gothic;
font-size: 15px;
color: #ffffff;
}

a:hover{
color: #ede9b7;
}

a {
color: #14baba;
text-decoration:none;
}

header{
float: left;
-webkit-box-sizing: border-box; height: 145px; width: 354px; padding: 0px 0px 0px 0px;
-moz-box-sizing: border-box; height: 145px; width: 354px; padding: 0px 0px 0px 0px;
box-sizing: border-box; height: 145px; width: 354px; padding: 0px 0px 0px 0px;
}

nav{
float: left;
background: url("http://www.iphoto.fragmentedmemories.net/images/navbg.png") no-repeat;    
-webkit-box-sizing: border-box; height: 122px; width: 456px; padding: 5px 0px 0px 10px;
-moz-box-sizing: border-box; height: 122px; width: 456px; padding: 5px 0px 0px 10px;
box-sizing: border-box; height: 122px; width: 456px; padding: 5px 0px 0px 10px;    
}

aside{
background: #0aaaad;
-webkit-box-sizing: border-box; height: 459px; width: 100%;  padding: 10px 10px 10px 10px;
-moz-box-sizing: border-box; height: 459px; width: 100%; padding: 10px 10px 10px 10px;
box-sizing: border-box; height: 459px; width: 100%; padding: 10px 10px 10px 10px;
-moz-box-shadow: 5px 5px 5px #1f201e;
-webkit-box-shadow: 5px 5px 5px #1f201e;
box-shadow: 5px 5px 5px #1f201e;
}


article{
margin-bottom: 40px;
-webkit-box-sizing: border-box; height: 100%;  min-width: 902px; padding-bottom: 30px;
-moz-box-sizing: border-box; height: 100%; min-width: 902px; padding-bottom: 30px;
box-sizing: border-box; height: 100%; min-width: 902px; padding-bottom: 30px;
}

#aboutpic{
float: left;
background: #0aaaad;
margin-bottom: 30px;
margin-right: 30px;
font-size: 13px;
-webkit-box-sizing: border-box; height: 380px; width: 258px; padding: 10px 0px 0px 10px;
-moz-box-sizing: border-box; height: 380px; width: 258px; padding: 10px 0px 0px 10px;
box-sizing: border-box; height: 380px; width: 258px; padding: 10px 0px 0px 10px;
-moz-box-shadow: 5px 5px 5px #1f201e;
-webkit-box-shadow: 5px 5px 5px #1f201e;
box-shadow: 5px 5px 5px #1f201e;
}


#content{
float: left;
border-top: 2px solid #ede9b7;
border-bottom: 2px solid #ede9b7;
-webkit-box-sizing: border-box; min-height: 246px; width: 580px; padding: 20px 20px 26px 20px;
-moz-box-sizing: border-box; min-height: 246px; width: 580px; padding: 20px 20px 26px 20px;
box-sizing: border-box; min-height: 246px; width: 580px; padding: 20px 20px 26px 20px;
}


#album{
float: left;
background: #0aaaad;
margin-right: 20px;
margin-bottom: 30px;
font-size: 13px;
-webkit-box-sizing: border-box; height: 250px; width: 220px; padding: 10px 0px 0px 0px;
-moz-box-sizing: border-box; height: 250px; width: 220px; padding: 10px 0px 0px 0px;
box-sizing: border-box; height: 250px; width: 220px; padding: 10px 0px 0px 0px;
-moz-box-shadow: 5px 5px 5px #1f201e;
-webkit-box-shadow: 5px 5px 5px #1f201e;
box-shadow: 5px 5px 5px #1f201e;
}

#album a:hover{
color:#ffffff;
}

#album a {
color: #ede9b7;
text-decoration:none;
}


footer {
clear: both;
background: #1f201e url(http://www.iphoto.fragmentedmemories.net/images/footerbg.png) repeat-x;
position: relative;
left:0px;
bottom:0px;
-webkit-box-sizing: border-box; height:36px; width: 100%; padding-top: 10px; padding-left: 10px;
-moz-box-sizing: border-box; height:36px; width: 100%; padding-top: 10px; padding-left: 10px;
box-sizing: border-box; height:36px; width: 100%; padding-top: 10px; padding-left: 10px;
}

html

CODE

[code]<!DOCTYPE html>
<html lang="en">
<head>
<title>Impression Photography</title>

<meta name="keywords" content="art, photography, illustration, portfolio, business">
<meta name="description" content="Place a brief description of your portfolio">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>


<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


<link rel="stylesheet" href="style.css" type="text/css"/>



</head>
<body>
<div class="body">

<header class="header">
<img src="images/logo.png">
</header>
<nav class="header">
<a href="http://www.iphoto.fragmentedmemories.net/">home</a><br>
<a href="http://www.iphoto.fragmentedmemories.net/">portfolio</a><br>
<a href="http://www.iphoto.fragmentedmemories.net/about.html">about</a><br>
<a href="http://www.iphoto.fragmentedmemories.net/">services</a><br>
<a href="http://www.iphoto.fragmentedmemories.net/">resources</a><br>
<a href="http://www.iphoto.fragmentedmemories.net/">contact</a><br>
</nav>

<article class="content">

<div id="aboutpic"><img src="images/aboutpic.png"><p><center><i>Photographer Mike Yang</i></center>
</div>

<div id="content">

Impression Photography was founded and created by Mike Yang as a means to share knowledge and free information about photography. <p><br>

Starting photography in the summer of 2010, Mike's world seemed to snap into place at the sound of the shutter release. Diligently studying the art of photography independently onward, Mike now strives to encourage self-teaching and free learning. Mike is inspired by music, literature, other art, people, but most of all, by ideas. He believes that there are no bounds to what one can learn with creativity, curiosity, and motivation.<p><br>

Currently doing freelance work Mike hopes to continue doing photography as a working artist. His photos have won local and international contests and his tutorials have been distributed across various art communities. He now resides in Lincoln, Nebraska looking forward to working with anyone willing to collaborate.

</div>

</article>

</div>

<footer>
</footer>
</body>    
</html>

This post has been edited by thenoesis: May 14 2011, 07:29 AM

[Frederiek]

I don't know what it looked like befor you changd the CSS.
I do see that the bottom border on #content shows above the end of the text, caused by height: 246px;.

[pandy]

What is it that changes when you refresh and in what browser(s)?

[thenoesis]

That yellow border isn't suppose to be there and the text isn't suppose to be yellow. It should look like this. I get this on every broswers, the text is yellow and breaks past the border. Then when I hard refresh it goes to the attached image. I don't understand why it does that.

I don't know what it looked like befor you changd the CSS.
I do see that the bottom border on #content shows above the end of the text, caused by height: 246px;.

From my understanding min-height will expand if there is content that goes over the 245px height.

This post has been edited by thenoesis: May 14 2011, 02:42 PM

[thenoesis]

I'm still have this problems but now its in another page called conceptual. When I update the style sheet it won't read unless you do a hard refresh.

http://www.iphoto.fragmentedmemories.net/conceptual.php

right now the images are all over the place but they are suppose to all be inline inside a div layer

[Frederiek]

You're right about min-height. But it seems that box-sizing does not work in combination with min- or max-width or -height ( http://www.quirksmode.org/css/box.html ). The about page looks ok now (Safari/Mac).

BTW, you declared min-height, min-width and padding three times:

CODE

-webkit-box-sizing: border-box; min-height: 246px; width: 580px; padding: 20px 20px 26px 20px;
-moz-box-sizing: border-box; min-height: 246px; width: 580px; padding: 20px 20px 26px 20px;
box-sizing: border-box; min-height: 246px; width: 580px; padding: 20px 20px 26px 20px;

while once is enough:

CODE

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
min-height: 246px;
width: 580px;
padding: 20px 20px 26px 20px;

On your conceptual page, the links *are* inside a div, but the thumbnails are so big and of different sizes, that they wrap to the next line when there's not enough space.

[thenoesis]

I think it has something to do with my host and ftp not syncing up correctly or whatever the case may be. In the conceptual page all the height are the same and when I open my html file on my computer it looks fine. Everything is lined up in equal height and it scrolls sideways revealing more images. But when I update my stylesheet it doesn't read it unless I do a hard refresh and I honestly have no clue what to do. I've deleted the file and only uploaded it on my ftp then I deleted it again and uploaded it through the file manager of my web host and it still does the same thing so I am at a loss here.