Webmaster Forum

Go Back   Webmaster Forum > Web Development > Web Design Lobby

Web Design Lobby Forum for general web design issues not specific to scripting or graphics.


Closed Thread
 
Thread Tools Display Modes
Share |
  #1  
Old 08-14-2011, 01:09 PM
DSeyir DSeyir is offline
Banned
 
Join Date: 07-07-09
Location: Around the biggest network in the world
Posts: 60
iTrader: 0 / 0%
How to center this on every browser

Hi, I'm trying to center this footer for every browser, it works great for chrome or firefox if I play with 1px in the width, but in opera it goes way out of the normal.
the css:
Code:
#footer { clear: both; float: left; padding-top:14px; font-size: 11px; background-color: #292929; background-image: url(images/nature-footer-bg.png); background-repeat:no-repeat; background-position:bottom; width: 950px; height: 50px; margin-left:332px;/*center footer*/ }
please check image
 

Advertisement

Advertisement

  #2  
Old 08-15-2011, 08:50 PM
mathman's Avatar
mathman mathman is offline
Contributing Member
 
Join Date: 08-13-11
Posts: 90
iTrader: 0 / 0%
I have been designing websites for two years now, and everytime I see someone with a problem in multiple browsers or I am having a problem myself, I ALWAYS find float in the css. Float has given me problems since the day I started webdesign and I will no longer use it because it really messes up your webpage.

Try getting rid of the float tag and try using position: relative or position:absolute instead. This has given me far more consistent results.
 
  #3  
Old 08-16-2011, 02:01 AM
DSeyir DSeyir is offline
Banned
 
Join Date: 07-07-09
Location: Around the biggest network in the world
Posts: 60
iTrader: 0 / 0%
tried, no results.
When I remove the float:left the whole site background goes away. I'll keep trying other things
 
  #4  
Old 08-16-2011, 02:27 AM
Frazier Frazier is offline
Banned
 
Join Date: 06-03-11
Posts: 238
iTrader: 0 / 0%
I am not a designer but i can ask about your problem from my designer friend.
 
  #5  
Old 08-16-2011, 02:51 AM
DSeyir DSeyir is offline
Banned
 
Join Date: 07-07-09
Location: Around the biggest network in the world
Posts: 60
iTrader: 0 / 0%
Quote:
Originally Posted by Frazier View Post
I am not a designer but i can ask about your problem from my designer friend.
can you?
that's awesome, I'll send you the test site url via pm.

thanks
 
  #6  
Old 08-20-2011, 11:46 AM
Gardenia~ Gardenia~ is offline
Junior Member
 
Join Date: 08-04-11
Location: USA
Posts: 44
iTrader: 0 / 0%
Actually, I've had similar problems with my banners. Just put <center> tags around the DIV, it's always worked perfectly.
 
  #7  
Old 08-20-2011, 11:47 AM
DSeyir DSeyir is offline
Banned
 
Join Date: 07-07-09
Location: Around the biggest network in the world
Posts: 60
iTrader: 0 / 0%
isn't <center> deprecated?
 
  #8  
Old 08-20-2011, 11:50 AM
Gardenia~ Gardenia~ is offline
Junior Member
 
Join Date: 08-04-11
Location: USA
Posts: 44
iTrader: 0 / 0%
All I know is that it's always worked for me. I don't know why. But if it has a chance at working, it's worth a shot.
 
  #9  
Old 08-27-2011, 10:46 AM
HTMLBasicTutor's Avatar
HTMLBasicTutor HTMLBasicTutor is offline
Administrator
 
Join Date: 10-29-07
Location: Canada
Posts: 26,710
iTrader: 5 / 100%
Quote:
Originally Posted by DSeyir View Post
Hi, I'm trying to center this footer for every browser, it works great for chrome or firefox if I play with 1px in the width, but in opera it goes way out of the normal.
the css:
Code:
#footer { clear: both; float: left; padding-top:14px; font-size: 11px; background-color: #292929; background-image: url(images/nature-footer-bg.png); background-repeat:no-repeat; background-position:bottom; width: 950px; height: 50px; margin-left:332px;/*center footer*/ }
Ditch the float and margin-left as you have it and use:
Code:
margin-left: auto; margin-right: auto;
Doing the above will take the width you set the footer at from the width of available screen space and divide the empty space by 2 and place it on each side.

And yes, <center></center> is depreciated.
 
  #10  
Old 08-29-2011, 02:54 AM
patrick0001's Avatar
patrick0001 patrick0001 is offline
Contributing Member
 
Join Date: 08-19-11
Location: Kuala Lumpur, Malaysia
Posts: 165
iTrader: 0 / 0%
Try this:

width:950px;
margin:0 auto;
 
  #11  
Old 08-31-2011, 05:03 AM
DSeyir DSeyir is offline
Banned
 
Join Date: 07-07-09
Location: Around the biggest network in the world
Posts: 60
iTrader: 0 / 0%
Quote:
Originally Posted by HTMLBasicTutor View Post
Ditch the float and margin-left as you have it and use:
Code:
margin-left: auto; margin-right: auto;
Doing the above will take the width you set the footer at from the width of available screen space and divide the empty space by 2 and place it on each side.

And yes, <center></center> is depreciated.
working, but when I remove the float, the whole site background goes away...
I'm working local, I'll upload the site and then place the link, thanks
 
Go Back   Webmaster Forum > Web Development > Web Design Lobby

Closed Thread


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

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

Similar Threads
Thread Thread Starter Forum Replies Last Post
Help with website center codeinfinity Coding Forum 4 09-23-2010 07:07 PM
Center Page in Browser Questor Web Design Lobby 5 08-03-2009 11:28 AM
center swf over jpeg? steeldoorarmor Coding Forum 3 05-07-2008 06:56 PM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 12:11 AM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2018 VIX-WomensForum LLC