help with 2 items please

[mimintweak]

Hello, this is my first time in this forum, it looks good!

I have designed a website that looks how it should in ie (except6) however opera is putting the third image in the right menu outside or next to the 2nd image. Problem 1

Problem 2, ( I am stumped) In the content area I have 2 bulleted lists, I want the bullet to be an image, should be simple eh. This only happens in ie.

The site in question http://www.fruvenu.com.au

The full css would be /styles/resources.css

The list css as below

.centre {

list-style-image: url(../images/bullet.gif);

margin: 0;

padding:20px;

}

 

.centre li {

display: block;

background-color:#fff;

font-size:smaller;

font-weight:800;

}

Appreciate any help and hope to spend more time here as I learn more about php. (hated it when I did my web design course!)

 

[haku]

You didn't really explain what the bullet problem is, but taking a stab in the dark about what that problem may be, you can probably fix it with:

 

list-style-position: inside;

[TheFilmGod]

I usually do:

 

li {
list-style: none;
background: url(../images/bullet.gif) no-repeat;
padding: 0 0 0 12px;
}

 

It works just fine. However, I typically use a different image for each <li> so it wouldn't be semantically correct to use this on an entire bullet list scale.

 

The problem I find in your code is your padding. Since the bullet is only on the left side the padding should be as follows:

 

padding: 0 0 0 20px;

 

The way you currently have it, creates padding for all four sides of the li block element.  :-\

 

[mimintweak]

Sorry, I am not sure what I'm doing. Hope I am replying to your message. Thanks I will try that.The site that I am working on is down. server problems.

[mimintweak]

Thanks, I will try all that! When the site is up again can anybody give me a clue as to how to fix the opera bug?

[haku]

Not without a link, or at least the applicable HTML.

 

But I would bet a dollar to a donut that you have some errors in your HTML. Have you checked to see if it validates on the w3c website?

[mimintweak]

Hi

Been having issues with the server, but the site is up now. still unable to display the apple bullet. I have validated all the pages in w3schools.

Here is the css followed by the html (php ext.)

body {

font-family:Verdana, Arial, Helvetica, sans-serif;

color: #4d4d4d;

font-size: 0.8em;

margin: 0;

padding: 0;

background: url(../images/background.jpg) repeat-y;}

h3 {

color:#336600}

a {

color:#990000;

font-weight:bold;

text-decoration: none;

}

a:hover {

text-decoration: none;

color:#336600;

 

}

#header {

 

}

#container {

position: absolute;

width: 808px;

left: 50%;

margin-left: -375px;

background: url(../images/content_03.jpg) repeat-y;

}

#centre {

margin-left: 170px;

margin-right: 201px;

min-height: 600px;

padding-right: 85px;

padding-left:5px;

}

 

#left{

position: absolute;

left:0;

width: 155px;

padding-left:5px;

}

#right {

position: absolute;

right:0;

width: 201px;

background: url(../images/menu_05.jpg) no-repeat;

 

}

#image_holder {

padding-left: 10px;

 

}

#footer{

height: 40px;

background: url(../images/content1_09.jpg) repeat-y;

}

ul {

list-style-type: none;

width: 100%; /* precision for Opera */

}

 

#footer li {

float: left;

}

 

#footer a {

margin: 0 5px;

width: 100px;

height: 20px;

display:inline;

text-align: center;

text-decoration: none;

}

 

#footer a:hover {

background: #fff;

border: hidden;

}

 

#footer a:active {

 

border: 1px solid gray;

color: #fff;

}

 

.menuright {

list-style-type: none;

margin: 0;

padding:0;

}

.menuright li {

margin-left: 30px;

margin-bottom: 5px;

}

.menuright a {

margin: 0 2px;

}

.centre ul li{

list-style-position: inside;

list-style-image: url(../images/bullet.gif);

margin: 0;

padding:0 0 0 10px;

}

 

.centre li {

background-color:#eefca6;

font-size:smaller;

font-weight:800;

}

 

p {margin: 0 0 10px 0;}

 

html as follows

 

<style type="text/css">

@import url("style/resources.css");

</style>

<script language="JavaScript" type="text/javascript">

<!-- Begin

function Start(page) {

OpenWin = this.open(page, "CtrlWindow", "toolbar=yes,menubar=yes,location=yes,scrollbars=yes,resizable=yes");

}

// End --></script>

</head>

 

<body>

<div id="container">

 

  <?php require_once('includes/banner.php'); ?>

<div id="left"> <img src="images/family.jpg" alt="family in the kitchen eating healthy food" />

  <h3>Lactose, gluten and egg free (nut dishes optional).</h3>

 

<img src="images/applesmall.jpg" alt="apple & schoolbooks" />

</div>

 

 

<div id="right">

<ul class="menuright">

<li><a href="index.php">FruVeNu Home</a></li>

            <li><a href="bookings.php">Bookings</a></li>

<li><a href="resources.php">Resources</a></li>

<li><a href="articles.php">Articles</a></li>

<li><a href="contact.php">Contact us</a></li>

<li><a href="organic.php">Organic Markets</a></li></ul>

<br />

<br />

<br />

  <div id="image_holder" align="center"><img src="images/fruit smoothie.jpg" alt="berry smoothie" /> <img src="images/watermelon.jpg" alt="watermelon with sunglasses" /></div></div>

  <div id="centre"><h3>Healthy Food Workshops using raw fresh living fruit, vegetables & nuts -based in Sydney, Australia.

  </h3>

<p>An increase in energy levels and weight loss can be experienced by increasing your daily intake of fresh living foods. </p>

 

<h3>Take control.</h3> <p> Doing something, no matter how small, is more rewarding than doing nothing.</p> 

  <ul class="centre">

  <li>  Encourage children to enjoy fruits & vegetables</li>

  <li> Provide healthy tasty meals for the family</li>

  <li> Incorporate more fresh food into the daily diet</li>

  <li>Feed vegan/vegetarian family members</li>

  <li> Make the transition to a raw food lifestyle</li>

  </ul>

<p> Fruvenu offers basic, easy to follow suggestions on a balanced approach to eating - and tasty recipes to incorporate into your current lifestyle.</p>

 

<p>Our facilitator will come to a location of your choice for a 2 hour session and prepare a selection of delicious, easy to make drinks and foods. <a href="workshops.php">(Here to see photos of recent workshops)</a></p>

<br />

<ul class="centre">

  <li>  nut/seed milks, the base for tasty, healthy drinks (lactose free)</li>

  <li>crackers, raw sprouted dips & seed pate's</li>

  <li> fresh raw soups using a variety of ingredients</li>

  <li> filling balanced salads, a meal in one!</li>

  <li> vegetable & nut loaves </li>

  <li> nut ‘cheeses’</li>

  <li> healthy sauces & dressings</li>

  <li> desserts & frozen sorbets</li>

  <li> sprouts - children love to watch things growing!</li></ul>

 

<br />

<h3>Site visitors</h3>

<a href="http://www.expresswebtools.com/"><img src="http://www.expresswebtools.com/counter/counter/38" width="136" height="26" alt="counter" /></a>

</div>

 

<div id="footer">  <?php require_once('includes/footer.php'); ?>

  </div>

 

</div>

 

</body>

</html>