Question with CSS


Hello group,

I had created a web page where in bottom it had a breadcrumb and it looks OK as long as it is in a high resolution but as soon as I get to 1024 x 768 it gets to the middle of the page and screws things out. In a way that it gets displayed in the middle of page on text!

Below is the CSS code, I will appreciate it if you could advise me on this issue and how to fix it.

Thanks,
ak

#breadcrumb
{
    position:absolute;
    bottom:0;
    font: 11px Arial, Helvetica, sans-serif;
    background-image:url('bc_bg.png'); 
    background-repeat:repeat-x;
    height:27px;
    line-height:27px;
    color:#9b9b9b;
    border:solid 1px #cacaca;
    width:98%;
	
    overflow:hidden;
    margin:5px;
    padding:0px;
}

Open in new window

akohanAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

HainKurtSr. System AnalystCommented:
replace width:98%; with 100%

and try to use

padding-right / padding-left :  10px (to put some space on right and left, do you really need this?)
or margin-left / margin-right : 10px, or even border properties...

for fine tuning...
0
Peter HartCommented:
0
OnthraxCommented:
You are using absolute positioning, which is normally not such a good idea.

Without any further code though I cannot determine if this is needed.
If possible get rid of the absolute positioning, remove any width and use margin to position it.
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Peter HartCommented:
margin will be dependant on the resolution?
0
OnthraxCommented:
It will if you are using absolute positioning, correct.
0
akohanAuthor Commented:

I tried different way but nothing makes it better or maybe I'm missing something here so I have attached the code here (HTML, CSS) for your review.

Thanks,
ak
0
akohanAuthor Commented:

OK, I'm attaching the files here.
0
akohanAuthor Commented:
I hope this time it accepts the zip file!
files.zip
0
Peter HartCommented:
You have a combination of tabkles and CSS and  no other wrappers on the page so it will not be positioned relative or absolutle  to anything else

the absolute position will work best if you put an overall container in the page and wrapper for the other parts of the page and then put the footer
see http://www.barelyfitz.com/screencast/html-training/css/positioning/
and my first link: http://www.barelyfitz.com/screencast/html-training/css/positioning/
0
akohanAuthor Commented:

please correct me if I'm wrong. from you comment I think I need to put all the code in a DIV as container?

Right?

Thanks.
ak
0
OnthraxCommented:
If you don't use a container it'll use the body of the page top position it.
If you put in a container e.g. a DIV and set position to relative it'll use that as a reference.

<div style="position:relative">
 your code here
<div>
0
akohanAuthor Commented:

Thanks for your response but it really behaves different in low resolution or high resolution.

Any idea how to make it stable?

Regards.
0
akohanAuthor Commented:

One thing I'm picky so much is that the frame (breadcrumb) is not staying in a row or if it does then it gets messy when the resolution is changing!


0
Peter HartCommented:
here's the solution: with a worked example:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

have you also tried it in different browsers (Safari,Firefox and IE 7,8 ?)
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
akohanAuthor Commented:

Thanks!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.