WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts

WeLoveCSS > WEB DESIGN > Browser Compatibility > CSS Float messing up in certain browsers.

  Thread Tools Display Modes
Old 6th April 14, 04:59 AM   #1
WLC Member
Join Date: Apr 2014
Posts: 1
Default CSS Float messing up in certain browsers.

This is my first post, and I'm excited to have just joined this community!

I'm jumping ship from IT/SysAdmin to work for myself and do do web design/development. I need to unleash my creative juices!

I'm looking forward to learning a lot and helping as much as I can as my knowledge grows!

-- Alright, here's my issue. I'm very new at doing this and my first project is an in-kind website for a charity ball in one month's time. I've begun laying it out using what I know of CSS and HTML (having only copied some parts of the nav menu's CSS). In Chrome, the website looks like I want it to! In IE, Safari, and Firefox, my floated elements are not in the right spots! Also - I made a 3 column layout and that also moves from where I want it to be, except in Chrome.

Should I use the position attributes instead of floating these elements?

Hopefully, I'm not asking too much for anyone to give me some sound advice of how to remedy this problem and I can apply it to all future websites as well! I've tried to layout the website cleanly and organized. I've completed Lynda.com's HTML and CSS tutorials. Nothing like real-world experience, though!

I don't have anything to offer, but I can +1 your replies, or however this forum works! haha - All help is greatly appreciated!

I've spent 10 hours so far on building the site, but that includes the graphics. I apologize if my answer is found in another article. I'm going to bed now - and as I'm still new - I imagine a response would be quicker than me browsing article after article and trying multiple things to fix my problem.

The website is at: http://www.niagaramasquerade.com/Untitled-2.html

Thank you so much everyone! - Aaron Zitello
azitello is offline   Reply With Quote
Old 6th April 14, 03:08 PM   #2
meesa's Avatar
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,714
Default Re: CSS Float messing up in certain browsers.

Okay, this is somewhat a mess trying to change around, so I'll have you change a couple things, and see where we're at from there.

First, your columns, though logical, don't work. The correct method is:

Left: Float Left - set width
Right: Float Right - set width
Middle: Unfloated, without a width (It just fills the remaining space between them)

Also, no absolute positioning. I'm just going to ban you from using it right now. There's nothing on your page you need it for, and sorry to say, but you don't know how to use it. (Don't worry, a lot of beginners don't, even though books make it seem like the almighty fix for everything) That being said, make your browser window shorter, and not the full height of your screen, and watch what happens to your footer and image.

So, try the above system I said before for the columns, and for anything APed (Absolutely positioned) change to, where necessary, floats, and if applicable, negative margins. You will also find using the clearleft|right|both) property will help you as well.
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote

Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

All times are GMT. The time now is 07:41 PM.

Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.