Learn VBA & Macros in 1 Week!

CSS - Firefox Is Not Displaying My List Items Correctly

Full Excel VBA Course - Beginner to Expert

Firefox Is Not Displaying My List Items Correctly	View Content

Hi,

I'm using a right-to-left layout and I can't find a way to display my list items correctly on Firefox. When I insert something into the rtl div with a float, the list item does not wrap correctly.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
<!--
#content {
margin:0 200px 0 20px;
border: 2px solid #000;
direction:rtl;
}
#floatdiv {
width:100px;
height:100px;
margin:10px;
border: 1px solid #000;
float:left;
}
-->
</style>
</head>
<body>
<div id="content">
<div id="floatdiv"</div>
<p>This is a test</p>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
</body>
</html>

Is there a problem in my code?

Thanks,

Ehud.

Full Excel VBA Course - Beginner to Expert

Items In A List Not Lining Up Correctly Under Each Other

Similar Tutorials

View Content

We have a list of items that are not lining up under each other.

The list of items is under a class 'item-list',
each individual item that is in the list is listed as an instance of the same class ''view-item view-item-RecentReviewSummary'. Each list item consists of a title (a link), a small photo to the left with labels/text wrapping around the photo on the right.

It happen when the page is wide (different monitors, resolutions etc) and in cases where the text wraps under it's photo (ie long enough text to require an extra line under the photo).
We were trying to use display: block, margins and positions to fix this. any ideas? Thank you. Some HTML/CSS following

HTML for first list item:
<div class="item-list">
<ul>
<li>
<div class='view-item view-item-RecentReviewSummary'>
<div class='view-field view-data-node_title'><a href="/millennium_park_lake_shore_walk">Millennium Park/Lake Shore Walk</a>
</div>
<div class='view-field view-data-node_data_field_small_image_field_small_image_fid'><img src="(URL address blocked: See forum rules)/files/ac_millennium_park_small.jpg" alt="Millenium Park" title="Millenium Park in the heart of Chicago" width="150" height="150" />
</div>
<div class='view-label view-label-node_data_field_reviewer_rating_field_reviewer_rating_value'>AC Rating
</div>
<div class='view-field view-data-node_data_field_reviewer_rating_field_reviewer_rating_value'>3
</div>
<div class='view-label view-label-node_data_field_description_field_description_value'>Summary
</div>
<div class='view-field view-data-node_data_field_description_field_description_value'>Check out the amazing "Cloud Gate" sculpture at
Millennium Park and then walk across Lake Shore Drive, Stroll along the Lake and then circle back through Grant Park toward Buckingham Fountain. This trip can be made easily with a wheelchair if your attendant likes to hike, however, the roughly two mile stroll may be a lot if you are on your own. Start by parking your car in the Grant Park North Parking Garage.
</div>
</div>
</li><li>

CSS: (each list item is a link, fields/labels and an image)

#view-label {}

.view-label-node_data_field_reviewer_rating_field_reviewer_rating_value {
/* AC Rating label */
float: left;
padding: 0 5px 0 0;
color: #369;
font-weight: bold;
text-decoration: italicize
}

.view-label-node_data_field_description_field_description_value {
/* Summary label */
color: 369;
font-weight: bold;
width: 350px;
padding: 4px 5px 0 0;
}

#view-field {}

.view-data-node_title {
/* attraction title value */
We thought putting code here would fix but didn't....
}

.view-data-node_data_field_reviewer_rating_field_reviewer_rating_value {
/* rating nbr */
position: relative; top;
float right;
background: url('fourstars.gif') no-repeat top left;
padding: 0 0 0 10px;
}

.view-data-node_data_field_description_field_description_value {
/* summary text */
margin-bottom: 15px;
font-size:.8em;
}

.view-data-node_data_field_small_image_field_small_image_fid {
/* image */
float: left;
margin-right: 5px;

List In Div Not Displaying Properly In Firefox

Similar Tutorials

View Content

Here is a quick visual layout of my page

(container)
(div banner)
(div left column) (div middle content) (div right column)
(div footer)

In my (div left column) is a list that is aligned right which works great. However, lower in the (div left column) I wish to make another list and align it left. The problem is it won't align all the way to the left. It stops at about the center of the div. I didn't notice it on the first list because it aligned right just fine but it also stops in the middle.

Here is the HTML:
(go easy on the coding, I'm still pretty new at this stuff)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="css/common.css" type="text/css" media="screen" />
<title>Las Vegas Floor Care</title>
</head>

<body id="body">
<div id="container">
<div id="banner">
</div>
<div id="content">
<div id="content_left">
<div class="links">
<ul class="list">
<li><a href="index.htm"><span class="list_big">H</span>OME <span class="list_big">P</span>AGE</a></li>
<li><span class="list_big">R</span>ESIDENTIAL</li>
<li><span class="list_big">C</span>OMMERCIAL</li>
<li><span class="list_big">C</span>ONTACT <span class="list_big">U</span>S</li>
</ul>
</div>
<div class="special_offers">Special Internet Offers</div>
<img class="image_center" src="images/coupon.jpg" />
<ul class="list_offers">
<li>Test 1</li>
<li>Test 2</li>
</ul>
</div>
<div id="content_middle">
<div id="content_middle_top">
</div>
<p class="text"><img src="images/slogan.jpg" style="float:left; margin-right:2px" /> At Las Vegas Floor Care we use Prochem truck mount extractors, which have been rated number one for over 30 years. We also use the Bridgpoint brand of treatment solutions that are eco friendly, pet friendly, and are even biodegradable. We offer carpet repair, cleaning, and protection making you get more out of your carpet no matter what the situation. We also offer 3 different types of tile cleaning to fit the condition of your tile and your pocket book.</p>
<br />
<p class="text">We cater to all aspects of cleaning ranging from the average home owner who wants clean floors to the executive who needs to keep their office in tip top shape, and everything in between. There is no job too big or small. We offer several service packages for home owners with yearly service contracts.</p>
<div id="content_middle_bottom">
</div>
</div>
<div id="content_right">
<img class="image_center" src="images/contact.jpg" />
<div class="side_text">If you have questions or would like to schedule a cleaning, please contact us at <span class="contact_number">(702) 756-0148</span>.</div>
</div>
</div>
<div id="bottom">
<img src="images/bottom_top.jpg" align="top"/>
<p class="bottom_text">
Phone: (702) 756-0148
<br />
Fax: (206) 350-7320
<br />
</p>
</div>
</div>
</body>
</html>

Here is the CSS:

Code:

#banner {position:relative; width:700px; height:130px; clear:both; background-image:url(../images/banner.jpg)}

#body {text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; background-image:url(../images/bg.jpg); margin-top:20px; background-position:center}

#bottom {position:relative; text-align:right; width:700px; clear:both; background-color:#970000}

.bottom_text {font-family:Calibri; font-size:14px; text-align:right; margin:0px 8px 0px 4px; color:#CCCCCC}

.contact_number {font-family:Calibri; font-size:12px; color:#970000}

#container {width:700px; margin-left:auto; margin-right:auto; text-align:left}

#content {position:relative; width:700px; overflow:auto; background-image:url(../images/content_bg.jpg); background-position:center}

#content_left {float:left; width:138px; margin-right:5px; clear:left}

#content_left_bottom {width:138px; background-color:#FF3399}

#content_left_top {width:138px; background-color:#FF3399}

#content_middle {float:left; width:414px}

#content_middle_bottom {width:414px; height:100px; background-image:url(../images/middle_bottom.jpg)}

#content_middle_top {width:414px; height:30px; background-image:url(../images/middle_top.jpg)}

#content_right {float:left; width:138px; margin-left:5px; clear:right}

#content_right_bottom {width:138px; background-color:#00FF00}

#content_right_top {width:138px; background-color:#00FF00}

.image_center {margin-left:auto; margin-right:auto; text-align:center; display:block}

.links a:link {text-decoration:none; color:#666666}
.links a:visited {text-decoration:none; color:#666666}
.links a:hover {text-decoration:underline; color:#970000}
.links a:active {text-decoration:none; color:#970000}

.list {font-family:Calibri; font-size:14px; list-style:none; text-align:right; margin:0px 4px 20px 4px; border-bottom:solid; border-bottom-width:1px; border-bottom-color:#666666; padding-bottom:10px; padding-right:4px; color:#666666}

.list_big {font-family:Calibri; font-size:18px}

.list_offers {font-family:Calibri; font-size:12px; list-style:none; text-align:left; margin-left:0px; overflow:auto; color:#666666}

.side_text {font-family:Calibri; font-size:12px; text-align:justify; margin:0px 4px 0px 4px; color:#666666}

.special_offers {font-family:Calibri; font-size:18px; text-align:center; margin-left:4px; color:#970000}

.text {font-family:Calibri; font-size:14px; text-align:justify; margin:0px 4px 0px 4px; color:#666666}

Thanks ahead of time for any help.

<ol> Gap Between List Numbers And List Items

Similar Tutorials

View Content

Hi,

I have an OL list (the numbered one) and the horz gap between the list item
number (as automatically generated by OL) and the text of the LI is too big
(according to client). Looks fine in FF but is bigger alright on IE (ahem
naturally .....)

I've played with the CSS for both the OL & LI styles even setting all
margins and paddings to 0 but without effect on the gap.

Is there any way to style that gap? Code below.

Kevin

<ol class="most_read">
<li class="most_read_li">Apples</li>
<li class="most_read_li">Oranges</li>
</ol>

.most_read {
text-align:left;
color:#808080;
font-size:10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight:normal;
margin-left:30px;
padding:0px;
margin-top:5px;
}

.most_read_li {
margin-bottom:7px;
margin-right:7px;
}

List Items

Similar Tutorials

View Content

whats the CSS for creating an unordered list that goes across the page rather than down with no bullet points?

Tr:first-child Not Displaying Correctly In Ie8

Similar Tutorials

View Content

I've been working will many css hacks. I just can't seem to get anything to work with the "first child"

posting the full css doc. Hopefully someone can help me.
PHP Code:
.gridContainer {

    padding:20px;

    /* For Microsoft IE */
    filter: progid:DXImageTransform.Microsoft.Gradient(enabled='true', GradientType=0, startColorstr='#003300', endColorstr='#006600');
    /*    background-color: #006600;*/
    background-image: -webkit-gradient(linear, left top, left bottom, from(#003300), to(#007700));
    background-image: -webkit-linear-gradient(top, #003300, #007700);
    background-image:    -moz-linear-gradient(top, #003300, #007700);
    background-image:     -ms-linear-gradient(top, #003300 0%, #007700 100%);
    background-image:      -o-linear-gradient(top, #003300, #007700);
    background-image:         linear-gradient(top, #003300, #007700);

    /* Grid Shadow */
    -webkit-box-shadow: 0px 0px 10px #000;
    -moz-box-shadow: 0px 0px 10px #000;
}

/* Font Family, Size and Color */
.gridContainer, .grid, .gridHeaderRow, .gridContainer a, .gridContainer input {
    font-family:arial;
    font-size:10px;
    font-weight:bold;
    color:#fff;
}

.grid {
    border-spacing:0px;
    border-collapse:collapse;
    /* if you want cell separation
    border-spacing:1px;
    border-collapse:separate;
    */

    background:#005501;
}

/*********************************************************************************/
/*********************************************************************************/
/*****************************      END COLORS       *****************************/
/*********************************************************************************/
/*********************************************************************************/

/* if you want to turn off animations for speed reasons turns these off */
.gridContainer tr, .gridContainer td, .gridContainer th, .gridContext div {
    /*
    -webkit-transition: background-color 200ms linear;
    -moz-transition: background-color 200ms linear;
    */
}

/* padding of the cells */
.grid td, .gridHeaderRow th {
    padding:0px;
    border-left:1px solid #636470;
    padding-left:6px;
}
.grid td {
    border-left-color:transparent;
}

.grid td:first-child, .gridHeaderRow th:first-child {
    padding-left:12px;
}

.grid td {
    padding-top:5px;
    padding-bottom:5px;
}

/* ODD ROWS */
.grid tr:nth-child(2n) {

}
/* EVEN ROWS */
.grid tr:nth-child(2n+1) {

}

/* this can't inherit the color because its fixed to the bottom of the page */
.gridPager.fixed {
    background:#222;
}

/* Row Highlight */
.gridWrapper tr:hover, .gridContainer th:hover,  .gridWrapper tr:hover input, .gridWrapper tr:hover a{
    color:#ffe;
    background-color: #005500;
}

/* Current Cell Highlight */
.grid td:hover {
    background-color: #008800;
}

/* Cell Borders */
.grid td {

}

.gridHeaderRow {
    border-collapse:collapse;
}

/* column hilte */
.grid td.hilite {
    background-color:#2A8ADD;
    color:#000;
}

/* stuck row */
.stuckRow td{
    padding:8px;
    background:#003300;
    color:#fff;
}
/* right click menu main box */
.gridContext {
    background-color:white;
    -moz-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:3px 3px 15px #000;
    -webkit-box-shadow:3px 3px 15px #000;
    box-shadow:3px 3px 15px #000;
}
/* right click menu each item */
.gridContext div {
    color:black;
    font-size:12px;
    padding:6px 15px;
}
/* right click menu hover */
.gridContext div:hover {
    background-color:#4071ee;
    color:white;
}
/* editable cell */
.editableInput[type="text"] {

    border-width:0px;
    /*border-bottom:1px dashed #ccc;*/
}

textarea.editableInput {

}

/* title bar */
.gridTitle {
    padding:10px;
    font-size:14px;

}

/* structure for entire grid */
.gridContainer {
    margin-bottom:10px;
    overflow:hidden;
    position:relative;
    border-collapse:collapse;
}

/* minimum shown before scroll bar apppears */
.gridWrapper {
    max-height:500px;
    overflow-x:hidden;
}


.gridHeaderRow tr:first-child {
    position: relative;

    background-image:     -ms-linear-gradient(top, #006600, #002200);

    background: none;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#006600), to(#002200));
    background-image: -webkit-linear-gradient(top, #006600, #002200);
    background-image:    -moz-linear-gradient(top, #006600, #002200);

    background-image:      -o-linear-gradient(top, #006600, #002200);
    background-image:         linear-gradient(top, #006600, #002200);

    /* For Microsoft IE */
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', GradientType=0, startColorstr='#006600', endColorstr='#002200');
    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(enabled='true', GradientType=0, startColorStr=#006600,EndColorStr=#002200)";
}

/* the header row cells */
.gridHeaderRow th {
    width:150px;
    cursor:pointer;
    padding-top:12px;
    padding-bottom:12px;

}

.gridHeaderRow th:first-child {
    border-left:0px;
}
.gridHeaderRow th:last-child {
    border-right:0px;
}

/* expand the inner components to meet the size of the container */
.grid, .gridHeaderRow {
    width: 100%;
}

/* all input fields */
.gridContainer input, textarea {
    background-color:rgba(255,255,215,.8);
    background-color: #CCDCAC;
    border:1px solid rgba(255,255,255,.2);
    outline:0px;
    height:2em;
    margin-top:-2px;
    -moz-border-radius:3px;
    border-radius:3px;
    -webkit-box-shadow: inset 0px 2px 5px #111111;
    -moz-box-shadow: inset 0px 2px 5px #111111;
    border:0px;
    color: #000;
}

/* no border left on first cell */
.grid td:first-child {
    border-left:0px;
}
/* no border right on last cell */
.grid td:last-child {
    border-right:0px;
}
/* select drop down boxes */
.grid td select {
    width:95%;
    border: 1px solid rgba(255,255,255,.1);
    outline:0px;
}
/* the pager */
.gridPager {
    width:auto;
    height:25px;
    overflow:hidden;
    padding:10px 0px 10px 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;

    background-color: rgba(0,0,0,.2);
    background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0,0,0,.2)));
    background-image: -webkit-linear-gradient(top, transparent, rgba(0,0,0,.1));
    background-image:    -moz-linear-gradient(top, transparent, rgba(0,0,0,.2));
    background-image:     -ms-linear-gradient(top, transparent, rgba(0,0,0,.2));
    background-image:      -o-linear-gradient(top, transparent, rgba(0,0,0,.2));
    background-image:         linear-gradient(top, transparent, rgba(0,0,0,.2));

    /* For Microsoft IE */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003300', endColorstr='#006600');
}
/* when the pager is fixed */
.gridPager.fixed {
    position:fixed;
    bottom:0;
    z-index:999;
    width:100%;
}
/* the last button in the pager when its fixed */
.gridPager.fixed > div:last-child {
    position: relative;
    left:-20px;
}
/* every div inside the pager */
.gridPager > div {
    margin-right:16px;
    float:left;
}

/* the text string inside the pager */
.gridTotal {
    padding:5px;
}
/* button styles */
.gridButton {
    padding:5px;
    -moz-border-radius:3px;
    border-radius:3px;
    cursor:pointer;
    text-align:center;
    font-size:11px;

    background-color: #006600;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#006600), to(#002200));
    background-image: -webkit-linear-gradient(top, #006600, #002200);
    background-image:    -moz-linear-gradient(top, #006600, #002200);
    background-image:     -ms-linear-gradient(top, #006600 0%, #002200 100%);
    background-image:      -o-linear-gradient(top, #006600, #002200);
    background-image:         linear-gradient(top, #006600, #002200);

    /* For Microsoft IE */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#002200', endColorstr='#006600');

    -webkit-box-shadow:1px 1px 5px #222;
    box-shadow:1px 1px 5px #222;

}

.gridButton:active {
    -webkit-box-shadow:-1px -1px 4px black;
    -moz-box-shadow:-1px -1px 4px black;
}

/* buttons in the title bar */
.gridTitle .gridButton {
    margin-top:-3px;
    margin-right:6px;
    float:right;
}

/* save button in the pager */
.gridPager .gridSave {
    float:right !important;
    display:none;
}
/* refresh button is tinier */
.gridRefresh {
    font-size:10px;
}

/* the div inside of each th that will chagne size */
.colResizer {
    background-color:transparent;
    position:relative;
    height:inherit;
}
/* the handle on each th that will grab to resize */
.colHandle {
    height:100%;
    width:20px;
    background-color:transparent;
    position:absolute;
    right:0px;
    top:0px;
}
/* the bottom right corner div that allows you to resize */
.gridHandle {
    width:10px;
    height:10px;
    cursor:se-resize;
    position:absolute;
    bottom:0px;
    right:0px;
    background-color:rgba(0,0,0,.5);
}

/* the right click menu */
.gridContext {
    position:fixed;
    width:200px;
    padding:2px;
    z-index:99999;
}
/* each option in the right click menu */
.gridContext div {
    cursor:pointer;
}
/* the close button in the right click  menu */
.closeContext {
    margin:0px !important;
    padding:0px !important;
    position:absolute;
    top:3px;
    right:3px;
    z-index:98;
    font-size:11px !important;
}
/* each input box inside the table inherits its parent styles */
.editableInput {
    width:95%;
    background:transparent;
    color:inherit;
    font-weight:inherit;
    font-size:inherit;
    font-family:inherit;
    margin:0px;
}
/* clickable nRows */
.nRows {
    cursor:pointer;
}
.grid a {
    text-decoration:underline;
}

Css Boxes Not Displaying Correctly In Ie/win

Similar Tutorials

View Content

I'm brand new to CSS. I pieced together the following CSS style sheet:

body {
margin-top:5px;
margin-bottom:5px;
padding:0;
background:#ccffff;
}

t{line-height:36px;}

#wrap {
position:50%;
width:613px;
margin:0 auto;
background:#ffffff;
margin-left:auto;
margin-right:auto;
align:center;
}

#sidebar {
position:absolute;
float:left;
width:150px;
border: 1px solid #000033;
padding:15px;
background:#ffffff;
height:370px;
z-index:1;
}

#main {
float:right;
width:390px;
border: 1px solid #000033;
overflow: auto;
font-family: "Times New Roman", serif;
font-size: 13px;
padding-top:12px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
background:#ffffff;
background-repeat:no-repeat;
background-position:75% 535px;
background-image:url(smalljester.jpg);
height:750px;
z-index:2;
}

It works fine on most browsers, but not of course in IE/Win. I think there's something basic I'm not understanding about style sheets. The page is meant to be (and is on most browsers I've tried and on Macs) centered (the two boxes centered), the two boxes are meant to have white backgrounds with thin solid borders, and the boxes are meant to overlap perfectly (the right border of the left box should exactly overlap the left border of the right box). Right now in IE(8)/Win(XP) it's not centered, the two boxes are not connected (separated by white space on a light blue background), and the white background extends the full height of the #main box (where it's not meant to go below the bottom of the left column). Any help appreciated.

Div Background Not Displaying Correctly

Similar Tutorials

View Content

I have a backround coded in the Div I have set up for my navigation...when I call an image in (button image) into the foreground of my Div, the background moves up so only part of it is viewable.

This is my html:

Code:

<div style="position:static;"><img src="images/hdr_regular.jpg" height="29" width="320" border="0" align="left" alt=""/></div>
<div style="position:static; background-image:url(images/nav_bg.jpg); background-repeat:repeat-x;"><img src="images/nav_logout_btn_grey.jpg" height="42" width="87" border="0"  /></div>

This is my css:

Code:

body, #wrapper
{ width: auto; min-width: 0px; min-height:100%; font-family:Arial,Helvetica,sans-serif; margin: 0; padding:0; overflow:hidden;
}
#wrapper_hdr  {position:static; width:auto; min-width:0px; min-height:100%; 
}
#wrapper_navigation { position:static; width:auto; min-width:0px; height:42px; background-image:url(../images/nav_bg.jpg); background-repeat:repeat-x;
}
#wrapper_content { position:static;width:auto; min-width:0px; background-image:url(../images/bg.jpg); background-repeat:repeat-x; padding:8px; padding-bottom:100px;
}
#wrapper_ftr { width:auto; min-width:0px; white-space:100%; height:80px; background-color: #F4F4F4; padding:2px; bottom:0; left:0;
}

any help would be greatly appreciated.

Thanks!

Page Not Displaying Correctly In Ie6

Similar Tutorials

View Content

Alright, I've taken it upon myself to port our guild website from 100% tables to mostly-css. However, once I was finished doing so; I had realized that a huge oversight was made. This oversight being Internet Explorer 6.0. The page displaying perfectly in IE7/Firefox.

Site: www.measureoffaith.net
Stylesheet: www.measureoffaith.net/style.css

Don't worry, I haven't incorporate any PHP yet so WYSIWYG as far as coding goes. In the stylesheet, I seperated the forum CSS from the main site CSS. All subsequent pages are coded using the same CSS stylesheet.

Any help would be greatly appreciated. Guidance as where to even start would also be amazing. It's easy to start from scratch for cross-browser functionality & backwards compatibility but at this point it seems overwhelming with all the bugs I have to fix as well.

Thanks so much.

index.html w/ stripped content:
Code:

<!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>
    <title>
      Measure of Faith on Aerie Peak
    </title>

<SCRIPT>
<!--
function F_loadRollover(){} function F_roll(){}
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rollover.js"></SCRIPT>

    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div id="banner">

    </div>
    <div id="container">
      <div id="navigation">
      <!-- Start of Navigation Bar (NavigationBar2) -->
        <table id="NavigationBar2" border="0" cellspacing="0"
        cellpadding="0" nof=
        "NB_FYHPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120NOF=NB_F  YVPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120"
        width="140">
          <tr valign="top" align="left">
            <td class="nospaces" width="140" height="30">
              <!-- Start of Navigation Button (NavigationButton1) -->
              <a href="#" onmouseover=
              "F_roll('NavigationButton1',1)" onmouseout=
              "F_roll('NavigationButton1',0)"><img id=
              "NavigationButton1" name="NavigationButton1"
              height="30" width="140" src=
              "images/Home_Hbutton_on2.gif" onload=
              "F_loadRollover(this,'images/Home_HRbutton_on2.gif',0)"
              border="0" alt="Home" /></a>
            </td>
          </tr>
          <tr valign="top" align="left">
            <td class="nospaces" width="140" height="30">
              <!-- Start of Navigation Button (NavigationButton2) -->
              <a href=
              "/eqdkp/viewnews.php"
              onmouseover="F_roll('NavigationButton2',1)"
              onmouseout="F_roll('NavigationButton2',0)"><img id=
              "NavigationButton2" name="NavigationButton2"
              height="30" width="140" src=
              "images/Raid_News_Nbutton_off2.gif" onload=
              "F_loadRollover(this,'images/Raid_News_NRbutton_on2.gif.bak',0)"
              border="0" alt="Raid News" /></a>
            </td>
          </tr>
          <tr valign="top" align="left">
            <td class="nospaces" width="140" height="30">
              <!-- Start of Navigation Button (NavigationButton3) -->
              <a href="charter.html" onmouseover=
              "F_roll('NavigationButton3',1)" onmouseout=
              "F_roll('NavigationButton3',0)"><img id=
              "NavigationButton3" name="NavigationButton3"
              height="30" width="140" src=
              "images/Charter_Nbutton_off2.gif" onload=
              "F_loadRollover(this,'images/Charter_NRbutton_on2.gif.bak',0)"
              border="0" alt="Charter" /></a>
            </td>
          </tr>
          <tr valign="top" align="left">
            <td class="nospaces" width="140" height="30">
              <!-- Start of Navigation Button (NavigationButton4) -->
              <a href=
              "roster.html"
              onmouseover="F_roll('NavigationButton4',1)"
              onmouseout="F_roll('NavigationButton4',0)"><img id=
              "NavigationButton4" name="NavigationButton4"
              height="30" width="140" src=
              "images/Roster_Nbutton_off2.gif" onload=
              "F_loadRollover(this,'images/Roster_NRbutton_on2.gif.bak',0)"
              border="0" alt="Roster" /></a>
            </td>
          </tr>
          <tr valign="top" align="left">
            <td class="nospaces" width="140" height="30">
              <!-- Start of Navigation Button (NavigationButton5) -->
              <a href=
              "/eqdkp/listmembers.php"
              onmouseover="F_roll('NavigationButton5',1)"
              onmouseout="F_roll('NavigationButton5',0)"><img id=
              "NavigationButton5" name="NavigationButton5"
              height="30" width="140" src=
              "images/DKP_Nbutton_off2.gif" onload=
              "F_loadRollover(this,'images/DKP_NRbutton_on2.gif.bak',0)"
              border="0" alt="DKP" /></a>
            </td>
          </tr>
          <tr valign="top" align="left">
            <td class="nospaces" width="140" height="30">
              <!-- Start of Navigation Button (NavigationButton6) -->
              <a href="/phpBB2/index.php"
              onmouseover="F_roll('NavigationButton6',1)"
              onmouseout="F_roll('NavigationButton6',0)"><img id=
              "NavigationButton6" name="NavigationButton6"
              height="30" width="140" src=
              "images/Forums_Nbutton_off2.gif" onload=
              "F_loadRollover(this,'images/Forums_NRbutton_on2.gif.bak',0)"
              border="0" alt="Forums" /></a>
            </td>
          </tr>
        </table>
      </div>

      <div id="content">
        <div class="newspost"><div class="wraptitle">
				<p class="subtitle">- I... AM... UNLEASHED!</p>
				<p class="thetitle">MAGTHERIDON DOWN</p></div>
          <div class="newsdate">
            28.04.2007 by <img src="images/icons/mar.png" />
          </div>
          <div class="newscontent">
            Magtheridon proved to be no match to the professional
            button clicking skills of MoF. Wiping a few times in
            order to fine tune the button clicking, we emerged
            with victorious with zero deaths and some bad loot.
          </div>
					<img src="images/news/magdown.jpg" summary="Magetheridon Down!" />
        </div>

...clipped content...

      </div><div style="clear: both;">
    </div>
    <div id="footer">
      &nbsp;
    </div>
  </body>
</html>

style.css: Code:

html,body { height: 100%; }

body{ 
 background: #000000 url('background-image.jpg') repeat-y;
 margin: 0;
 height: 100%;
}

.newspost{
width: 100%;
padding: 0;
text-align: center;
left: 50%;
}

.wraptitle{
float: left;
height: 79px;
}

p.subtitle{
font: bold 8pt/11pt trebuchet ms, tahoma;
color: #555555;
text-align: left;
border: 0;
padding-top: 35px;
margin: 0;
}

p.thetitle{
font: bold 11pt/11pt trebuchet ms, tahoma;
color: #000000;
text-align: left;
border: 0;
padding: 0;
margin: 0;
}

.newsdate{
font: 8pt/13pt trebuchet ms;
text-align: right;
float: right;
}

.newscontent{
font: 8pt/13pt tahoma;
text-align: justify;
width: 785px;
color: #555555;
clear: both;
background-color: #dedede;
border: thin solid #cdcdcd;
}

p.newsvideo{
font: 8pt/13pt tahoma;
width: 785px;
text-align: center;
border: 0;
padding: 0;
margin: 0;
}


a:link{
 text-decoration: none;
}

a:hover{
 text-decoration: underline;
}

a:visited{
 text-decoration: none;
}

a:active{
 text-decoration: none;
}

#banner{
 background-image: url('header-one.jpg');
 height: 200px;
 width: 943px;
 padding: 0;
}

h5.styling{
 color: #555555;
 font-family: trebuchet ms, tahoma;
 border: 0;
 padding: 8px; 
 margin: 0;
}

p.styling{
 color: #555555;
 font: 8pt/11pt trebuchet ms, tahoma;
 font-size: 12px;
 border: 0;
 padding: 8px; 
 margin: 0;             
 text-align:justify;
}

td.styling{
 font-color: #555555;
 font: 8pt/11pt trebuchet ms, tahoma;
 font-size: 12px;
 border: 0;
 padding: 0; 
 margin: 0;             
 text-align:justify;
}

html > body #navigation{
 background-image: url('left-runner.jpg');
 font-size: 0;
 float: left;
 width: 140px;
 min-height: 100%;
 padding: 0 0 0 4px;
 line-height: 0;
 border: 0;
 margin: 0;
}

html > body #content{
 background: #EDF2F5;
 float: right;
 width: 796px;
 min-height: 100%;
 padding: 0;
 border: 0;
 margin: 0;
}

.clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}
.clearfix {
    display:inline-block;
}
.clearfix {
    display:block;
}
* html .clearfix {
    height:1px;
}


#container{
 width: 940px;
 height: 100%;
 margin: 0;
 padding: 0;
 border: 0;
}

#footer{
 background-image: url('bottom-frame.jpg');
 width: 943px;
 height: 47px;
}

Not Displaying Correctly In Mozilla - Ok In Ie

Similar Tutorials

View Content

Hi There,

Here is my HTML, and below is my css, it displays as i wanted in IE, but obviosly Mozilla is the corrct browser to use, so what am i missing here?

This is the link you can reference, http://cies.loadedtech.com.au/Default.aspx?tabid=547 If you look at it in IE it is fine, but Mozilla has this margin at the top...PLEASE HELP.

HTML:
Code:

<body>
<div id="mainSiteHold">

	<div id="contentLeft"><p>&nbsp;</p></div>
	
	<div id="contentMid"><p>&nbsp;</p></div>
	
	<div id="contentRight"><p>&nbsp;</p></div>

</div>
</body>

CSS:
Code:

body { margin:0px; padding:0px; background-color:#ffffff; }

#mainSiteHold { position:relative; width:934px; margin-top:0px; margin-left:auto; margin-right:auto; margin-bottom:1em; text-align:left; }

#contentLeft { float:left; position:relative; top:0px; width:180px; background-color: red; }

#contentMid { float:left; position:relative; top:0px; width:709px; background-color: blue; }

#contentRight { float:left; position:relative; top:0px;width:45px; background-color: green; }

Thanks

Opera Not Displaying Correctly!

Similar Tutorials

View Content

Safari/css Not Displaying Correctly

Similar Tutorials

View Content

I tried to find this answer by doing a search, but maybe I'm asking the search engine wrong.

I'm creating an online shopping environment for my cousin. It's mostly done, but...it isn't displaying right in Safari...and Netscape. But mostly I care about Safari.

Here is the link:
http://gregsgoods.com/seestore.php

In IE7 is displays correctly. In Safari the second column or main section is displaying below the sidebar area. I'm not sure how to fix it.

Here is the CSS code:
Code:

html {min-height: 100%;}

* {
	margin: 0;
	padding: 0;
}

a {
color: #005B9C;
}

a:hover {
color: #0B2444
}

img {
border: 0;
}

body {
	background: #E2E7EF url(/gregsgoodbackground.gif) repeat-x left top;
	color: #ccc;
	font: normal 62.5% Tahoma,sans-serif;
}

p,ul {padding-bottom: 1.2em;}

li {list-style: none;}

h1 {
	font: normal 1.8em Tahoma,sans-serif;
	margin-bottom: 4px;
	color: #005B9C;
	margin: 0 0 7px 0;
}

h2 {
	font: normal 1.3em Tahoma,sans-serif;
	margin-bottom: 1px;
	color: #005B9C;
	margin: 0;
}


.clearer {clear: both;}

.left {float: left;}

.right {float: right;}

.container {
	position: absolute;
	left:50px; 
	top:188px;
	background-color: #FFF;
	font-size: 1.2em;
	margin: 0 auto;
	padding: 0 8px 8px;
	width: 780px;
}


.top {
	padding: 8px 8px 0;
}


.header {
	position: absolute;
	left:50px; 
	top:10px;
	background-color: #fff;
	font-size: 1.2em;
	height: 173px;
	margin: 0 auto;
	padding: 8px 8px 5px;
	width: 780px;
}
.header .left, .header .right {
	background-color: #000033;
	color: #fff;
	color: #FFF;
	height: 163px;	

}
.header .left {
	background: transparent url(/img/Top.jpg) top left repeat-x;
	border: 1px solid #7795BD;
	font: normal 2.8em "Trebuchet MS",sans-serif;
	line-height: 163px;
	width: 777px;
	text-align: left;	
	
}

.header .right div {
	padding-left: 16px;
	padding-top: 16px;
	font: normal 1.6em "Trebuchet MS",sans-serif;
}




.navigation {	
	background: #D9E1E5 url(/img/nav.jpg);
	border: 1px solid #7795BD;
	height: 23px;
}
.navigation a {
	background: transparent url(/img/nav.jpg) left top repeat-x;
	border-right: 1px solid #7795BD;
	color: #fff;
	display: block;
	float: left;
	font-size: 12px;
	font-family: Arial;
	font-weight: bold;
	line-height: 23px;
	text-decoration: none;
	padding: 0 18px;
}
.navigation a:hover {
background: transparent url(/img/nav.jpg) left bottom; 
color: #f1f1f1;
}


.main {
	border-top: 8px solid #FFF;
	background: url(/img/bgmain.jpg) repeat-y;
}


.sidenav {
        float: left;
	margin: 5px;
	width: 195px;
}
.sidenav h2 {
	color: #333300;
	font-size: 1em;
	font-weight: bold;
	line-height: 30px;
	margin: 5;
	padding-left: 12px;
}
.sidenav ul {
	padding: 0;
	border-top: 1px solid #e4e4e4;
}
.sidenav li {border-bottom: 1px solid #e4e4e4;}
.sidenav li a {
	font-size: 1.1em;
	color: #333300;
	display: block;
	padding: 8px 0 8px 5%;
	text-decoration: none;
	width: 95%;
}
.sidenav li a:hover {
	background-color: #ebebeb;
	color: #654;	
}

/* content */
.content {
        float: right;
	margin: 5px;
	padding: 0 16px;
	width: 536px;
}
.content {
	color: #666;
	font-size: 1.0em;
	margin-bottom: 6px;
}


.content .imgright {
padding: 5px;
border: 1px solid #666;
margin-left: 4px;
float: right;
}



.footer {
	background: url(/img/bluefooter.jpg) repeat-x;
	color: #FFF;
	font: bold 1em sans-serif;
	line-height: 39px;
	text-align: center;
}
.footer a,.footer a:hover {color: #FFF;}

Help Me With This Charity Website? - Displaying <li> Items Problem

Similar Tutorials

View Content

My friend has been working with a charity, and apparently their website is outdated.

I have decided to attempt giving them a new look but already find myself having some CSS issues.

In FireFox things are looking good so far, but not in IE.

I would like someone to first help me with the list items <li> I want them to appear in IE the same as they do in FF. Can you help me with this?

Ugh, I'm trying to add an URL but new users can't what a waste of time this has been! If you can work this out, here is the URL:

http:// thomasjadams.co.uk / charity

Regarding The Display Of List Items

Similar Tutorials

View Content

Hi Guys,
I am trying to incorporate a CSS file into an xml document.I have the following problem.

My XML file is:



<?xml-stylesheet type="text/css" href="styledocument.css" ?>

<document>

<employee>
<firstname>peter</firstname>
<lastname>lance</lastname>
</employee>

</document>

My corresponding styledocument css file is :

employee {display:list-item;color:red;}
firstname {display:inline;}
lastname {display:inline;}

---

Output in IE5:

peter lance
-----

The expected output should be peter and lance as list items with bullets preceding them and in red color. But my output is
peter lance in just red color without any bullets.

List-item value of the display attribute is not recognised at all.

Can u help deal with this problem!!!

Padding Between List Items In Ie

Similar Tutorials

View Content

I've tried the popular tricks to figure this out, but don't seem to have the touch.

In IE, the list item is 2px taller than in FF.

page:
URL Removed

CSS:

Code:

.mainNav ul {margin: 0; padding: 0; list-style: none;}
.mainNav ul li {border-top: 1px solid #27466c; border-bottom: 1px solid #021940; background: url('../images/menu_bg.gif') top left repeat-y; display: block;}
.mainNav ul a, .mainNav ul span {display: block; height: 17px; padding-top: 4px; font: 11px Verdana,Sans-Serif; color: #ffffff;}
.mainNav ul a:link, .mainNav ul a:visited {text-decoration: none;}
.mainNav ul a:hover{text-decoration: none; color: #9fb3cb;}
.mainNav ul ul ul a:hover, .mainNav ul ul ul ul a:hover {text-decoration: none; color: #3e5064;}
.mainNav ul ul li {border: 0; background: url('../images/sub_menu_bg.gif') top left repeat; border-top: 1px solid #627996;}
.mainNav ul ul ul li {border: 0; background: url('../images/sub_sub_menu_bg.gif') top left repeat; border-top: 1px solid #627996;}
.mainNav ul ul ul ul li {border: 0; background: url('../images/sub_sub_sub_menu_bg.gif') top left repeat; border-top: 1px solid #627996;}
.unselected, .selected, .empty {display: block; float: left; height: 21px; width: 22px;}
.currentPage {border-right: 4px solid #000530; margin-right: 1px;}

HTML on page (it's quite heavy)

Getting A List Of Items To Align

Similar Tutorials

View Content

Hi, I have a list of items, but when one item goes onto the next line, It doesn't align with the text above it. Here is an example. Look at the right hand column, and notice how the list items, when they go into 2 lines, the second line aligns with the bullet point and not the text.

Anyone know how to fix this?

thanks

Netscape 7.1 Not Displaying Css Correctly On Localhost

Similar Tutorials

View Content

Hi all,
Has anyone heard or seen this before.
I am trying to run a test on my local server (Apache) and it will not display correctly...the colums seem to be all over the place. The wierd thing is that when i upload it to a remote server like he http://www.cartgurudemo.com/3c-hd-ft-flex.htm it shows fine.
Also when i test it with IE both local and remote it works fine.
Any ideas as to what this might be?
Cheers,
camcim

Web Server Not Displaying Css Template Correctly

Similar Tutorials

View Content

I'm a novice web developer and I created a website for a non-profit group using a free CSS Template. It worked great until a few months ago, then the left and right borders suddenly were out of align. It works fine on another web hosting company's web server, but not the one it needs to work on. I recreated the whole website using a different CSS template and it is doing the same thing! Any ideas? Thanks so much!

Dreamweaver Not Displaying Layout Correctly

Similar Tutorials

View Content

When using the following code, the "Design" preview does not display correctly within Dreamweaver MX 2004, but it does display correctly in all browsers.

Does anyone know if this a problem with Dreamweaver or my CSS code.

Update:- removing "position:absolute" from #infoPanel fixes the design preview problem, but this isn't really a solution, as I need to position absolutely.
The only problem I've got is the design preview in Dreamweaver. I am happy with the final browser output, but the layout is awful within Dreamweaver.

Thanks
Matthew

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welcome</title>
<style type="text/css">
<!--
#infoPanel{
	position:absolute;
	width:760px;
	
	height:100px;
	border-style:solid;
	border-width:1px;

}
#infoPanelDetails{
	margin: 10px;
	
	position:absolute;
	width:480px;
}
#infoPanelLink{
	margin:10px;
	
	position:absolute;
	width:240px;
	
	left:480px;
	text-align:right;
	
}
-->
</style>
</head>
<body>
<div id="infoPanel">
  <div id="infoPanelDetails">
    <p>Some detailed text here.</p>
  </div>
  <div id="infoPanelLink">
    <p><a href="http://www.wherever.com" >www.wherever.com</a></p>
  </div>
</div>
</body>
</html>

Equidistant Objects In Ie7 Not Displaying Correctly

Similar Tutorials

View Content

I used the CSS Tricks dot com guide to make my menu bar items equidistant from one another and it works perfectly in Chrome, Firefox and IE8.... but not IE7 (or IE8 Compatibility Mode). BTW the guide example works fine in IE7 but I'm doing something only ever so slightly different. I really don't have a clue what to do, so would appreciate some help.

Here's the relevant CSS code I'm using:

Quote:
#content {
width:1000px;
margin-left:auto;
margin-right:auto;
margin-top:0;
margin-bottom:0;
padding:0;
padding-top:230px;
}

/* Menu */

#menu {
height:40px;
padding:0;
padding-left:40px;
padding-right:40px;
display:block;
}

#menu a {
margin:0;
padding:0;
display:block;
float:left;
}

#menu a span {
position:relative;
display:block;
z-index:-1;
}

#menu-row {
margin: -40px 0 0 150px;
padding: 0;
height: 40px;
}
#menu-row div {
width: 33.3%;
float: left;
}
#menu-row div a {
float: right;
}

#menu .home {
background: url(images/menu-home.png) 0 0 no-repeat;
display: block;
width: 150px;
height: 40px;
outline: none;
}

#menu .science {
background: url(images/menu-science.png) 0 0 no-repeat;
display: block;
width: 150px;
height: 40px;
outline: none;
}

#menu .radio {
background: url(images/menu-radio.png) 0 0 no-repeat;
display: block;
width: 150px;
height: 40px;
outline: none;
}

#menu .club {
background: url(images/menu-club.png) 0 0 no-repeat;
display: block;
width: 150px;
height: 40px;
outline: none;
}

and HTML

Quote:
<div id="content">
<div id="menu">
<a href="#" class="home"><span>Home</span></a>
<div id="menu-row">
<div><a href="#" class="science"><span>Science</span></a></div>
<div><a href="#" class="radio"><span>Radio</span></a></div>
<div><a href="#" class="club"><span>Club</span></a></div>
</div> 

</div> 

All the links in the menu-row div are shifted up vertically from the first link in IE7 and I don't know why?

Equal Height List Items

Similar Tutorials

View Content

I have an unordered list of 4 items that I have styling to be a horizontal navigation. I have set the css of the li to have a width of 25%. This works fine when the screen is full width but as I scale the browser to have a smaller width the text inside the li wrap - as to be expected. My question is, is there a way of ensuring that all 4 li's have the same height even when the content is of different lengths (thus some of the li's content do not wrap).
Also can this be done purely in CSS without the use of Jquery?
Thanks in advance