IE/FF css issue: Side bar gap/padding, etc 2

jlockley · Feb 28, 2008

Trying to position a sidebar (buttons) to work iin FF and IE. In FF there is a wide gap left pushing side bar graphic off the space and cutting off end. In IE Sidebar graphic sits left, but is then too short, so the sidebar button repeats.

Is this just a weird Mozilla thing, or do I have hidden margin, padding or something going on? Don't have the form on site yet, or I would link.

Note that the Header (a photo - I think photo.jpg) and the wrapper place with no problem.

CSS for the items above, sidebar and body text follows:

Header and logo (Paired at top of page)

{
margin: 0;
padding: 0;
}

body {
background: #FFFEF5 url('../../Desktop/ProHospitality%20Web%20Page/images/img01.gif');
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #657383;
}

h3 {
color: #258383c;
}

h2 {
color: #258383c;
}

h1 {
color: #258383c;
}

h1 {
}

h2 {
margin-bottom: 1em;
text-transform: uppercase;
font-size: 1.2em;
}

h3 {
margin-bottom: 1.5em;
text-transform: uppercase;
font-size: .8em;
}

ol {
margin-bottom: 1.5em;
}

ul {
margin-bottom: 1.5em;
}

blockquote {
margin-bottom: 1.5em;
}

p {
margin-bottom: 1.5em;
}

p {
}

blockquote {
margin-left: 2em;
padding-left: 1em;
border-left: 2px solid #F08F02;
font-style: italic;
}

ol {
margin-left: 3em;
}

ul {
margin-left: 3em;
}

ul {
}

ul li {
}

ol {
}

ol li {
}

code {
}

pre {
}

pre {
}

code {
}

a:link {
color: #F08F02;
}

a:hover {
text-decoration: none;
}

a:visited {
}

img {
}

.image-left {
float: left;
margin-right: 1em;
}

.image-right {
float: right;
margin-left: 1em;
}

select {
}

textarea {
}

input {
}

input {
}

textarea {
}

select {
}
/*problem*/
/* Header */

#header {
height: 247px;
padding: 0 0 0 330px;
background: url('../../Desktop/ProHospitality%20Web%20Page/images/Photo.jpg') no-repeat;
}

/* Logo - extend height later */

#logo {
height: 247px;
padding: 1px 0 0 40px;
background: url('../../Desktop/ProHospitality%20Web%20Page/images/Banner.jpg') no-repeat;
text-transform: lowercase;
}

#logo h1 {
float: left;
letter-spacing: -.1em;
font-style: italic;
font-size: 4em;
}

#logo h1 a {
color: #616d78c;
}

#logo h2 {
float: left;
letter-spacing: -.05em;
font-style: italic;
font-size: 1em;
}

/* Wrapper */

#wrapper {
margin-right: 100px;
background: url('../../Desktop/ProHospitality%20Web%20Page/images/img05.jpg') repeat-y 300px 0;
}

/* Sidebar - find width */

#sidebar {
Float: left;
width: 330px;

}

/* Content. Not sidebar. Main Text. Padding brings bars flush to graphic. Do not adjust */

#content {
margin-left: 390px;
padding: 30px;

/*snip - font stuff Button is 300 X 60 px button. will not show in 300 px space*/

#menu a {
display: block;
height: 60px;
padding: 1px 0 0 50px;
background: url('../../Desktop/ProHospitality%20Web%20Page/images/button2.jpg') repeat-x;
text-decoration: none;
font-size: 1.4em;
font-style: italic;
color: #003333;

Vragabond · Feb 28, 2008

So I reckon you're talking about the #sidebar element. That one only has width and it floats, so it should work normally in all the browsers. I assume it is a div, but that is not clear from the code you posted. Could you post a link to the site or failing that at least the relevant html as well?

Also, is the first declaration * (meaning all elements) or just blank?

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

jlockley · Feb 29, 2008

HTML here. This is still the rough draft. It will be cut down later.

<!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">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ProHospitality Search</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="logo">
<h1>Prohospitality Search</h1>

</div>
</div>
<div id="wrapper">
<div id="sidebar">
<div id="menu">
<h2>Navigation Menu</h2>
<ul>
<li><a href="#" accesskey="1" title="">Home
</a></li>
<li><a href="#" accesskey="2" title="">Who We Are </a></li>
<li><a href="#" accesskey="3" title="">How We Work
</a></li>
<li><a href="#" accesskey="4" title="">Current Positions
</a></li>
<li><a href="#" accesskey="5" title=""> Resources for Job Seekers
</a></li>
<li><a href="#" accesskey="6" title=""> Resources for Employers
</a></li>
<li><a href="#" accesskey="7" title="">Contact Us</a></li>
</ul>
</div>
<div id="TheYour Managers</h2>
<blockquote>
<p>Your managerment are the lynch pins of your success. From service training, financial oversight, outreach, to guest interaction and loss prevention, they are resonsible for your investment and the experience of your guests. Prohospitality Search is committed to finding not only people with titles but qualified professionals to fill your front of house and operational needs. </p>

</blockquote>
</div>
</div>
<div id="content">
<div id="welcome">

<h2>Front of the House and Operational Management specialists</h2>
<p><strong>For Restaurants, Hotel Food and Beverage outlets, Private Clubs and all Hospitality Venues. </strong></p>
</div>
<div id="example">
<h2></h2>
<h2>Front of the House Specialists</h2>
<p>ProHospitality Search is the Front of the House Affiliate of Chefs' Professional Agency. After over 50 Years of full service hospitality staffing, a sepcialized service has been developed to focus soley on your management staff needs. HospitalityPro Search sources: </p>
<ul>
<li>Restaurant General Managers</li>
<li>Operational Management for large and small corporations</li>
<li>Food and Beverage Directors for Hotels, Clubs and Resorts.
</li>
<li>Maitres De Service and strong Dining Room Managers</li>
<li>Sommeliers and Beverage Directors</li>
</ul>
<h3>HospitalityPro Search works focuses on Management only.</h3>
<blockquote>
<p>HospitalityPro Search is an the Front of the House of Chefs' Professional Agency. Now a separate entity, Hospitality ProSearch focus on your qualified management staff. Our afilliations with the Guest First Group permit us to offer our clients part time and third party services where a full time management employee is not needed.</p>
</blockquote>

</div>

<div style="height: 1px; clear: both;"></div>
</div>
<div id="footer">
<hr />
<p id="links"><a href="#">Email</a> | <a href="#">Chefs' Professional Agency</a> | <a href="#">Guest First Group</a></p>

</div>
</body>
</html>

Vragabond · Feb 29, 2008

I think it has to do with the list item gap. In IE it is controlled via margin on the list element, whereas in FF it is controlled via the padding on the list item element. You're custom defining the margin on the list element (which means both IE and FF will use the same value) but you're not defining anything for the padding on the list items (which means IE will default it to 0 and FF will default it to 40px left padding). This pushes your menu out in FF.

That's the only logical explanation I can give you provided with your scarce description of the problem.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

jlockley · Feb 29, 2008

That makes sense. I will try it and post the final url when it's up. Thanks.

jlockley · Mar 7, 2008

Here the page up:

http://www.prohospitalitysearch.com

I have two questions;

I have tried to put the padding on the separate list items (I think I am wrong in that) with no success..where would this be inserted?

Also, as you see in the CSS and the source, there is a further
graphic - banner.jpg - which in design view on desktop shows to the right of the picture (photo.jpg). It does not show when loaded onto the site. What am I doing wrong. Thanks if you answer.

Vragabond · Mar 7, 2008

Your site is hosted on a *nix machine, which means that filenames are case sensitive. You have uploaded an image called banner.jpg to the server, but you're trying to load an image called Banner.jpg. In Windows those would be the same files, but on *nix machines, the files are treated as different ones. You need to change your CSS to reflect the real file (banner.jpg) or rename your file to reflect what is in the CSS (Banner.jpg).

As for your first issue, I think the biggest problem lies in your first declaration in your CSS:

Code:

{
    margin: 0;
    padding: 0;
}

I do believe you wanted to nullify all the margins and all the paddings on all your elements. However, your code does that on a blank element. If you want to do it for all element, you need to include asterisk as a symbol for all elements:

Code:

{
    margin: 0;
    padding: 0;
}

This will inevitably break a lot of things on your page, but I think this is what you wanted to do in the first place. If you just want to move the menu to the left edge, then just adding padding: 0; to the [tt]#menu ul[/tt] would suffice.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

jlockley · Mar 7, 2008

Thanks so much. That was the ticket. Still needs tweaking, but I am delighted to be past that barrier.

Vragabond · Mar 7, 2008

Oops, looks like I made an error in my second code box. It should read:

Code:

* {
	margin: 0;
	padding: 0;
}

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

audiopro · Mar 8, 2008

Vragabond
That has solved a problem with me too as I want to prevent a sub level inheriting a value.
Have a star for that handy hint but I stared at those original code boxes for ages trying to spot the difference.

Keith

http://www.studiosoft.co.uk

jlockley · Mar 8, 2008

I was wondering about that..they really looked the same. Placing the padding at UL worked for me, but let me ask what the actual and general function of the star is.
Thanks again. I spent hours tweaking the thing and didn't figure it out.

Vragabond · Mar 8, 2008

The code you had before:

Code:

{
  padding: 0;
  margin: 0;
}

means something to the effect of "change padding and margin on all sides of the _blank element_ to zero. Since blank element does not exist, this rule is simply ignored by the browsers.

My changed code:

Code:

* {
  padding: 0;
  margin: 0;
}

states that "padding and margins should change to zero on all sides of ALL elements". The asterisk (star), as is usual in computer-related fields, is a wildcard meaning everything.

That is why my corrected code would work (it would change the padding to zero on that ul element along with all other elements) and yours didn't (because it just change the padding to zero on a blank element).

I recommend visiting SelectORacle to further learn the meaning of specific selectors. It will give you nice English explanations of complex CSS selectors.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

jlockley · Mar 8, 2008

Aha. Thanks.

jlockley · Mar 13, 2008

The site above is up now at

http://www.prohospitalitysearch.com/

Thanks for the help. It needs tweaking and content, but It works

I am afraid I am back. Using the same general form for a second/sister site I hit the same problem times three. The fix suggested above worked for the first round, but this time the entire column (#sidebar) moves over 1x the column width in IE, although again Firefox is fine.

Note that I cleverly bought a copy of expression web thinking that would make things easier, but as far as I can see, it messes them up. I have been picking lint out of the html page ever since.

It's about 2:00 am and I'm whupped by this.

CSS

/* Design by Schweig*/

{
margin: 0;
padding: 0;
}

body {
background: #FFFEF5 url('/images/img01.gif');
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #657383;
}

h3 {
color: #258383c;
}

h2 {
color: #258383c;
}

h1 {
color: #003333;
}

h1 {
}
/* why undeefined h1 */

h2 {
margin-bottom: 1em;
text-transform: uppercase;
font-size: 1.2em;
color: #003333;
font-style: oblique;
}

h3 {
margin-bottom: 1.5em;
text-transform: uppercase;
font-size: .8em;
}

ol {
margin-bottom: 1.5em;
}

ul {
margin-bottom: 1.5em;
}

blockquote {
margin-bottom: 1.5em;
}

p {
margin-bottom: 1.5em;
}

p {
}

blockquote {
margin-left: 2em;
padding-left: 1em;
border-left: 2px solid #F08F02;
font-style: italic;
}

ol {
margin-left: 3em;
}

ul {
margin-left: 3em;
}

ul {
}

ul li {
}

ol {
}

ol li {
}

code {
}

pre {
}

pre {
}

code {
}

a:link {
color: #F08F02;
}

a:hover {
text-decoration: none;
}

a:visited {
}

img {
}

.image-left {
float: left;
margin-right: 1em;
}

.image-right {
float: right;
margin-left: 1em;
}log

select {
}

textarea {
}

input {
}

input {
}

textarea {
}

select {
}
/*problem*/
/* Header */

#header {
margin-left:0px;
margin-top:0px;
height:247px;
padding: 0 0 0 236px;
background: url('images/hat2.jpg') no-repeat;
}

/* logo and picture height are both 247. Removes gap */

#logo {
height: 247px;
padding: 0px 0 0 40px;
background: url('images/banner.jpg') no-repeat;
text-transform: none;
}

#logo h1 {
float: left;
letter-spacing: -.1em;
font-style: italic;
font-size: 4em;
color: #003333
}

#logo h1 a {
color: #003333;
}

#logo h2 {
float: left;
letter-spacing: -.05em;
font-style: italic;
font-size: 1em;
color: #003333
}

#logo a {
text-decoration: none;

}

/* Wrapper */

#wrapper {
margin-right: 4px;
background: url('/images/img05.jpg') repeat-y 300px 0;
}

/* Sidebar - find width was 300 */

#sidebar {
Float: left;
width: 239px;

}

/* Content. Not sidebar. Main Text. Padding brings bars flush to graphic. Do not adjust */

#content {
margin-left: 250px;
padding: 30px;

}

#sidebar { }
#Sidebar h2 {
display: none;
}

#Sidebar ul {
margin-left: 0px;
list-style: none;
}
/ * ----- */

/* Menu */

#menu {
}

#menu h2 {
display: none;
}
/* this code only impacts thet text and not the buttons */
#menu ul {
margin: 1px;
list-style: none;
padding-left: 1px;
}

#menu li {
display: inline;
}

#menu a {
display: block;
height: 60px;
padding: 1px 0 0 50px;
background: url('images/button3.jpg') repeat-x;
text-decoration: none;
font-size: 1.4em;
font-style: italic;
color: #003333;
}

#menu a:hover {
color: #333366;
}

/* comment - move 15 px to left */

#comment {
padding: 30px;

}

#comment blockquote {
margin-left: 15;
}

/* Welcome */

#welcome {
}

/* Footer */

#footer {
padding: 60px 30px;
background: url('/images/img06.gif');
color: #ADB07C
}

#footer hr {
display: none;
}

#footer p {
margin: 0;
font-size: .8em;
}

#footer a {
color: #ADB07C
}

HTML

<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Chefs' Professional Agency</title>
<meta name="recruiting professional chefs, sous chefs, pastry chefs and other food and beverage professionals for the best of the food and beverage side of the hospitality industry sinceo 1964"/>
<meta name="keywords" content="Professional Chefs, Hospitality professionals restaurant jobs, Food and Beverage Directors,Hospitality recruiting, Restaurant recruiting, professional Chefs, Executive Chefs, Sous Chefs, Pastry Chefs, Bakers, Restaurant managers, Club managers, Catering Managers, Sommeliers, Garde Mangers, Catering Directors,Hotels, Restaurants, Kitchens, Bakeries, Pastry Shops, Cruise Liners, Spas, Casinos, Resorts, Corporate Chefs, specialty chefs, Rising Star Chef, chef resumes, restaurant interview, the restaurant job market, changing jobs in the hotel and restaurant industry, hospitality search">
<meta name="description" content="Hospitality recruiters supplying top chefs and managers for Restaurants, Hotels, Clubs and Resorts in and beyond the United States."/>
<meta name="googlebot" content="norarchive"/>
<link href="default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.style1 {
margin-left: 0px;
margin-top: 0px;
}
.style2 {
margin-right: 0px;
}
</style>

</head>
<body
<div id="header">
<div id="logo">
<h1>Chefs Professional Agency</h1>
<h2>The oldest continuous culinary recruitment firm in the United states</h2>

</div>
</div>
<div id="wrapper">
<div id="sidebar">
<div id="menu">

<ul>
<li><a accesskey="1" href="index.html">Home
</a></li>
<li><a accesskey="2" href="about.html">About 
</a></li>
<li><a accesskey="3" href="resume.html">
Complete Resume Guide
</a></li>
<li>
<a href="chefresources.html" accesskey="4" title="">Career Resources </a></li>
<li>
<a href="employerresources.html" accesskey="5" title="">Employer Resources
<a href="jobseekers.html" accesskey="6" title="">Job search resources.</a></li>
<li>
<a href="consultants.html" accesskey="7" title="">
Top Consultants</a></li>
<li>
<a href="frippery.html" accesskey="7" title="">
Foie t-shirts, cows and other frippery.</a></li>
<li>
<a href="#" accesskey="7" title="">Contact Us</a></li>
</ul>
</div>
<div id="Testimonial">
<h2 class="style1">Pardon our new look - The Content remains:</h2>
<blockquote style="height: 258px">
<p>As popular as our candidate resources from the complete
chefs' resume guide, career decision making resources,
electronic job search tips, tasting and interview selections and
more has become, we felt that the look was outdated. The 
old page is still there or simply click on the links above to
find the same useful material and more. </p>

</blockquote>
</div>
</div>
<div id="content">
<div id="welcome">

<h2>The Right Chef for Every Venue</h2>
<p style="width: 375px"><strong>Chefs Professional has been providing Corporate and Executive
Chefs, Pastry Chefs, Bakers, true Garde Mangers and culinary
specialists of all stripes  to fine dining and casual
restaurants, hotels, clubs, bakeries, retail outlets and all manner
of food and beverage venues for over fifty years. </strong></p>
</div>
<div id="example">
<h2></h2>
<h2>Why Chefs' Professional Agency</h2>
<p style="width: 211px">After over fifty years  </p>
<ul>
<li>We have a vast network of connections in all areas of the
hospitality industry.</li>
<li>We understand that each location has specific requirements
even among different kinds of locations.</li>
<li>We have a vast network of candidates and professional
connections in the USA and throughout the world through which to
source people to fit your needs.
</li>
<li>We have been doing this for a very long time.  We get
it.</li>
<li>We have a reputation for integrity and high standards both
towards our candidates and out clients which sets us apart from
the volume headhunter mentality prevalent today. </li>
<li>We have a profound understanding of our clients' and our
candidates' need for discretion. </li>
<li>Finding chefs and culinary professionals is all we do. We
travel to network and find them. </li>
<li>Two of the Bay Areas ten top new restaurants in 2007 boast
our candidates. Many of our previous candidates and current
friends are owners of the country's top restaurants. </li>
<li>We are connected to people who do the things we don't.
Sometimes you need a chef, sometimes you need more. Sometimes
your chef is great, but consulting is necessary. We have that. </li>
</ul>
</div>
<div id="testimonial">
<h3>What about managers? </h3>
<blockquote>
<p>In 2007 we spun off a separate management group,
Prohospitality Search (The official name of Chefs' Professional
Agency is Chefs Pro  Hospitality Search.) We found
ourselves doing too much and achieving too little, especially in
the management area and arranged with Howard Cummins, who has
worked with us for years to assume the management positions. .
Prohospitality  continues to enjoy  the vast network of Chefs'
Professional Agency but is  committed solely to sourcing
and vetting the best management available for your needs,
permitting Chefs' Professional Agency to work with the country's
finest culinary experts.</p>
</blockquote>

</div>

<div style="height: 1px; clear: both;"></div>
</div>
<div id="footer">
<hr />
<p id="links"><a href="#">Email</a> | <a href="#">Chefs' Professional Agency</a> |
Our affiliations |
<br>870 Market St, 863. San Francisco, CA 94102. (415) 392 1563</br> </p>

</div>
</div>
</body>

</html>

Vragabond · Mar 13, 2008

I don't know what refers to your old site and what is the new site (if there is a new site). Could you start a new thread with a link to the new site?

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

jlockley · Mar 13, 2008

If that's better, sure. I wasn't sure how best to do it.

They are both new sites. The "New Site" is not yet up..I can see if I can put it up for viewing, though.

jlockley · Mar 13, 2008

Vragabond:No need. I actually put the whole mess up again and somehow didn't manage to post it. However looking here I realized that in eliminating the styles imposed on the html sheet by Expression Web I had removed one bracket too many.

</style>

</head>
<body
<div id="header">
<div id="logo">
<h1>Chefs Professional Agency</h1>
<h2>The oldest continuous culinary recruitment firm in the United states</h2>

I guess the operative phrase here is "duh". Setting that right worked with IE, but I have a slew of stuff to fix, tweak, adjust and edit. I will post it when the site is done or at least up, king of. Once more thanks. It's good just to know that when it won't go further, that there's a place to run. Where I was at at 2:00 this morning. I just could not figure out what was moving the column over.

johnwm · Mar 14, 2008

As a general guide, I usually try and make the code standards-compliant first, so it renders correctly in FF. Then go back and do any tweaks to make it work in the non-standard browser.

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

jlockley · Mar 14, 2008

I thought I had done that. FF seems easier. That would make IE non standard? Love it.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

IE/FF css issue: Side bar gap/padding, etc 2

Technical User

Programmer

Technical User

Programmer

Technical User

Technical User

Programmer

Technical User

Programmer

Programmer

Technical User

Programmer

Technical User

Technical User

Programmer

Technical User

Technical User

Programmer

Technical User

Similar threads

Log in

Part and Inventory Search

Sponsor