Hey guys,
I am trying to launch this site here <snip/> but I am having a problem with Chrome. If you look at the .slider div you will notice that the image and text are both floated left and right respectably. For some reason, only in Chrome (and only online) the right float sometimes doesn’t take hold. This works in every single other browser…what the heck?
Can anyone help me out and figure out what’s wrong with this? Please advise.
Thanks,
Eric Huang
Can anyone help me out and figure out what’s wrong with this? Please advise.
Hi,
Untested, but try wrapping your anchors/images in a block level element like a <p> and then float that block left.
As it is right now you have a floated inline element (even though the float generates a block box it’s not the same as a block level) adjoining a block level div (your floated .text div)
I was able to see the problem in chrome by reloading the page. It displayed fine on initial page load but did as you described on refresh.
I can’t replicate your problem here (not even sure which section you’re referring to) though I do see a lot of things that COULD be causing issues – or at the very least is wasteful/non-semantic markup.
Images are not paragraphs of TEXT, no matter how desparately some folks around these parts cling to that notion, so lose those stupid paragraphs around the IMG tags. That leaves you with a bunch of perfectly good semantic tags in the rest of those sections, so you could lose that inner DIV as pointless too. Instead of floating two block areas I would suggest setting margin-left on the remaining h2 and p so that the margin drops under the floated IMG.
Hmm. That could be your cause, I see your IMG tags are still in default behavior. Floating them and/or setting display:block on them if keeping the wrapping P might fix that issue.
Also you don’t have a ‘list’ of short items there – good rule of thumb is that if you are going to use a heading tag and multiple paragraphs in a section, that’s not a list-item nor should you be wasting markup on a list around it. (though I don’t know if that particular jquery bull is reliant upon that)
Unrelated is the nonsensical heading tag order and use of the outdated tranny doctype. You’re writing a new page, that’s what STRICT is for. Transitional is for supporting old/outdated/half-assed coding techniques.
The placement of google analytics in the HEAD could also be causing issues since it can write out markup – that’s why that should be placed before </body>
Of course, I’m naturally against the fat bloated jquery nonsense for a simple scroller – but that’s me. That uncompressed jquery is my page target size and compressed it’s a third… Rarely worth it for some goofy animated effect. I’d also take an axe to all those extra META tags that NOTHING actually uses.
If I wrote a page like that the markup would probably get cut down to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<meta
name="description"
content="Washington DC based freelance web designer and developer specializing in helping businesses establish their online indentities."
/>
<meta
name="keywords"
content="washington dc, web, design, designer, freelance, development, developer"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
Eric Huang is a Web Designer and Developer
</title>
<script
type="text/javascript"
src="scroller.js"
></script>
</head><body>
<div id="pageWrapper">
<h1>
ERIC HUANG
<small>
<span><span> - </span>WEB DESIGNER AND DEVELOPER</span>
CREATING SIMPLE, BEAUTIFUL WEBSITES
</small>
</h1>
<div id="middle">
<img src="images/lefttab.png" class="prev"/>
<img src="images/righttab.png" class="next"/>
<div class="slider">
<img
src="images/index.jpg"
alt="Bringing Business and Personal Interests Online"
/>
<h2>BRINGING BUSINESS AND PERSONAL INTERESTS ONLINE</h2>
<p>
Let's bring your business or personal interests online! My name is Eric Huang. I have been working in the web design and development industry for a good five years now. Of those fives years, I have had the pleasure of working on projects ranging from personal blogs to large foundations. Contact me today to see if I can help you establish or re-establish your online identity!
</p>
<!-- .slider --></div>
<div class="slider">
<a href="http://childrenofkibera.org">
<img
src="images/cofk.jpg"
alt="Children of Kibera Foundation"
/>
</a>
<h2>CHILDREN OF KIBERA FOUNDATION</h2>
<p>
The Children of Kibera Foundation is a non-profit organization dedicated to improving the lives of poor and otherwise uneducated children in Nairobi, Kenya. I helped the foundation establish its online identity through creating original branding, creating an accessible yet beautiful site design, and implemented a custom backend that allows to make changes whenever they want.
</p><p>
<a href="http://childrenofkibera.org">Launch Site</a>
</p>
<!-- .slider --></div>
<div class="slider">
<a href="http://nd.edu/~carroll/">
<img
src="images/carroll.jpg"
alt="Carroll Hall"
/>
</a>
<h2>CARROLL HALL, UNIVERSITY OF NOTRE DAME</h2>
<p>
Carroll Hall is one of the oldest, most prestigious residence halls on the University of Notre Dame's campus. I was tasked in coming up with an original solution to help promote the dorm and its surroundings. I opted to use a very graphically heavy approach designed to highlight the beautiful campus around the university and Carroll.
</p><p>
<a href="http://nd.edu/~carroll/">Launch Site</a>
</p>
<!-- .slider --></div>
<div class="slider">
<a href="http://erichuangis.com/lore/index.png">
<img
src="images/lore.jpg"
alt="Lore Systems"
/>
</a>
<h2>LORE SYSTEMS</h2>
<p>
Lore Systems is a respected medium sized information technology company in the Washington DC metro area. For this site, I was tasked for redesigning their outdated website to a much more modern looking solution. I accomplished this goal with a very sleek corporate colors and tone.
</p><p>
<a href="http://erichuangis.com/lore/index.png">Launch Site</a>
</p>
<!-- .slider --></div>
<div class="slider">
<a href="http://erichuangis.com/vacarcenter/index.png">
<img
src="images/vacarcenter.jpg"
alt="Virginia Car Center"
/>
</a>
<h2>VIRGINIA CAR CENTER</h2>
<p>
Virginia Car Center is a brand new high-end used car dealership based out of Dulles, Virginia. They approached me to help them brand their online identity to match their luxury inventory. I came up with a raw but refined tone through the use of color highlights and simple design.
</p>
<p>
<a href="http://erichuangis.com/vacarcenter/index.png">Launch Site</a>
</p>
<!-- .slider --></div>
<div class="slider">
<a href="http://inalethemovie.com">
<img
src="images/inale.jpg"
alt="Inale the Movie"
/>
</a>
<h2>INALE THE MOVIE</h2>
<p>
Inale is a new movie out of Nigeria. It is the largest budget movie to date and is designed for domestic and international audiences. I was tasked with creating a very graphic and visual site invoking the rich color palette of the Nigerian tribal tradition. Look for Inale coming soon to theaters in the near future!
</p><p>
<a href="http://inalethemovie.com">Launch Site</a>
</p>
<!-- .slider --></div>
<!-- #middle --></div>
<div id="content">
<div id="about">
<h2>ABOUT ERIC HUANG</h2>
<p>
Eric Huang is currently studying at the University of Notre Dame. He has been helping individuals, organizations, and companies establish or re-establish their online identities for a little over five yeras. Eric continues to enjoy success working a very large range of projects ranging from a movie website to a car dealership.
</p>
<!-- #about --></div>
<div id="contactInfo">
<h2>CONTACT INFORMATION</h2>
<a href="http://www.facebook.com/ericwenweihuang">
<img
src="images/facebook.png"
alt="Eric Huang's Facebook"
/>
</a>
<a href="http://www.linkedin.com/in/ericwenweihuang">
<img
src="images/linkedin.png"
alt="Eric Huang's LinkedIn"
/>
</a>
Phone: 703 517 7491<br />
Email: <a href="mailto:eric@erichuangis.com">eric@erichuangis.com</a>
<!-- #contactInfo --></div>
<!-- #content --></div>
<div id="footer">
© 2010 Eric Huang
<!-- #footer --></div>
<!-- #pageWrapper --></div>
</body></html>
Of course it would take a custom scroller script to be written since I would NEVER waste my users time on bloated framework crap like jquery, and I’d probably not bother with google analytics since I get all the information I need gleaned from the apache logs by programs like webalizer and analog (Do not waste the visitors time on redundant tracking), etc, etc…
But really that’s a bunch of pointless/useless markup removed, and would index better in the search engines since it’s no longer overstuffed on the keywords meta and has sensible heading orders… the latter of those helping with accessibility and making your heading orders actually make sense; since “CREATING SIMPLE, BEAUTIFUL WEBSITES” is not the start of a new subsection any more than “ABOUT ERIC HUANG” would be a subsection of “INALE THE MOVIE” – which is what a h2 preceding a h3 would MEAN.
Semantics – it’s not just about slapping lists, headings and paragraphs around everything, it’s about using the right ones with the right meanings in the right circumstances.
For doing the formatting in the CSS, again I’d make
.slider img {
float:left;
}
.slider h2,
.slider p {
margin-left:256px; /* or however wide the image is + any padding you want */
}
Just as in the rewritten h1 I’d do
h1 small {
display:block;
overflow:hidden; /* wrap floats */
width:100%; /* trip haslayout, wrap floats IE */
text-align:right;
}
h1 span {
float:left;
}
h1 span span {
display:none; /* hide the "-" that's there for CSS off users */
}
or for the section right above the footer
#about {
float:left;
width:480px; /* or whatever you had there */
}
#contactInfo {
margin-left:480px;
}
NOT that I’d go with that layout since it’s a fixed width that isn’t even 1024 friendly, and the grey on grey is WAY below accessibility minimums being for the most part illegible, no matter how ‘pretty’ it is… though some dynamic fonts might help with that instead of declaring everything in PX.
Sorry, didn’t mean to rain on your parade there – just trying to point out what I see wrong and be helpful. It’s what I do 
Jason,
Good to see you active! I will take your very helpful points into consideration! And no worries about shooting me down, I know my coding abilities aren’t my strong suite haha.
Also, could a admin remove my link from the first post? Thanks.
That’s a one time only favour as we don’t usually edit post on request 
Thanks! I owe you one I guess.