CSS - Ie8 Css Rendering Issue (what Else Is New?)

Greetings everyone! I've been working on the following page for a couple of days now, and it looks fine in Safari and Firefox, but all my CSS fail in IE. I don't know what the problem is. Feel free to view the page at the following url http://www.netunification.com/demo/

I spoke with a friend and he speculates IE is having problems with the float command. I'm not so sure of this because I used the same CSS techniques while building the following site (http://www.the904.com/demo/).

The904 page renders perfectly in IE and I can't figure out what the difference is between the pages. I thought I used the same concept with both pages.

I've been trouble shooting the problem for a couple of days now, but I haven't had any luck. Can please someone take a look at my net u page (http://www.netunification.com/demo/) and suggest a solution

Thanks in advance for any/all assistance. Your time and effort is greatly appreciated!

Walt

Hi guys, pretty new to CSS layout, and recently created a site for my girlfriend. I used 960 grid system to handle my layout css, and it renders perfectly in safari/FF/IE7+... after I installed IE Tester, i realized that IE6 wasnt rendering properly. The menu and z-index stuff arent appearing correctly.

If anyone can have a quick look and let me know where my code is causing issues it would be a great help.

I'm not allowed to post the URL, as im a new user, but I guess I can send through PM if you want to have a look?

Thanks a bunch.

Hello,

I am using ASP.NET to create a web application. I HAVE to use a master page which means that I do not have complete control over the rendering.

The trick is, the master page defines a menu at the top of the page. I need to create a table that dynamically fills the contents of the REMAINDER of the screen. If there is any overflow, I want to scroll the contents.

Does anyone know how I can have the table fill the REMAINDER of the screen? I can nest DIVs and such once I have that outer table.

Thank you!
Crystal

Hi

I am completely stumped by this. My CSS is not rendering in FF, I am running FF on a mac.

Two pages, they are nearly the same, but show one display Css and the other does not - No CSS and With CSS

I have been going crazy trying to find out what is wrong. The CSS link is here

Thanks

Jake

Ive noticed this is only a problem in IE6(and probably some more older browsers)...Firefox 3 and IE 7 it works fine.

Visit this site: (you will have to do it twice because you need to login first.)

http://ronnieswietek.com/flashden/newsletter/newsletter.php?do=preview&id=2

u: admin
p: testadmin

I put a blue background on the div so you can understand what I am talking about. If you look at it in firefox, the blue covers the whole newsletter, text and images, but if you look at it in IE, it only does a small portion of it...Can anyone figure out this mystery???

CSS for that section:
Code:

#newsletter_subject
{
	padding: 5px;
	font-size: 18px;
	color: #ffffff;
	background-color:#999999;
}

#newsletter_preview
{
	overflow: auto;
	background-color:#000066;
}

#recipients
{
	padding: 5px;
	font-size: 18px;
	color: #ffffff;
	background-color:#999999;
}

and then the corresponding html:

Code:

<div id="newsletter_subject">flashden newsletter!</div>
<br>
<div id="newsletter_preview"><font size="6"><span style="font-weight: bold; color: rgb(153, 255, 153); font-family: georgia;">flashden <span style="text-decoration: line-through;">is</span> <span style="color: rgb(204, 0, 0); background-color: rgb(0, 0, 0);">awesome</span> <span style="font-family: impact; font-style: italic; text-decoration: underline; color: rgb(153, 255, 0); background-color: rgb(0, 51, 204);">I</span>!</span></font><br>
  <br>
  <img style="width: 202px; height: 261px;" alt="" src="http://flashden.net/new/site_flashden.net/interface/logo_top.gif" align="left"><br>
</div>
<br>
<div id="recipients">This Newsletter WILL be sent to the following users:</div>
etc.....

I have a onMouseOver event that draws a top border over text. This works fine with Mozilla/Firefox, but it doesn't render in IE. I think I know why -- it's because I used CSS to position the text beforehand, and in IE it doesn't bother drawing the top border because it's out of the text's bounding box, right?

So, how do I fix this so it works in IE?

I've posted a sample page with the problem he
http://aaron.verge-rpg.com/vergebrd/test.html

Any help would be appreciated.

Hi,
I've designed a site that looks excellent on IE and Firefox on a PC, as well as (as far as I've been told) Safari. However, I've seen a couple of instances on IE on a Mac where the menu doesn't render correctly.
The page can be viewed here.

On the problem browsers, the top menu items will be displayed in two stacks, rather than across the bottom of the image. If anyone out there has any idea why this is happening, I'd appreciate the help.

The menu code in the HTML:
Code:

<table border="0" width="665" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" align="center" valign="top"> 
<ul class="topmenuul" id="dmenu">
<li class="topmenuli"><a href="home.htm" class="topmenutitle">H O M E</a>
</li>
<li class="topmenuli"><a href="weddings.htm" class="topmenutitle">W E D D I N G S</a>
</li>
<li class="topmenuli"><a href="#" class="topmenutitle">P O R T R A I T S</a>
<ul class="submenuul">
<li class="submenuli"><a href="authors.htm">Authors & Artists</a></li>
<li class="submenuli"><a href="families.htm">Families</a></li>
<li class="submenuli"><a href="musicians.htm">Musicians</a></li>
</ul>
</li>
<li class="topmenuli"><a href="solo.htm" class="topmenutitle">S O L O</a>
</li>
<li class="topmenuli"><a href="#"class="topmenutitle">E M M A</a>
<ul class="submenuul">
<li class="submenuli"><a href="bio.htm">Bio</a></li>
<li class="submenuli"><a href="press.htm">Press</a></li>
<li class="submenuli"><a href="contact.htm">Contact</a></li>
</ul>
</li>
</ul>
</td>
</tr>
</table> 

The CSS for the menu:
Code:

.topmenuul{
	list-style-type:none;
	margin: 0px;
	padding:0px;
}

.topmenuli{
	list-style-type:none;
	float: left;
	margin-left: 10px;
/*	border-left:1px solid #000000; */
/*	border-right:1px solid #000000; */
	padding: 0px;
	color: #000000;
}


.topmenutitle{
	display:block;
	color:#000000; 

}
.topmenuli a:link {
	color: #000000;
	}
.topmenuli a:visited {
	color: #000000;
	}
.topmenuli a:hover{
	display:block;
	padding-top: 1px;
 	padding-bottom: 1px;
	text-decoration:none; 
	color:#cccccc; 
	background:#fff;
	width: 120px;
}

.submenuul{
	list-style-type:none;
	position:absolute;
	margin: 0;
	padding: 0;
	display:none;
	color:#000000;
}

.submenuli a{
	display:block;
	padding-top: 1px;
 	padding-bottom: 1px;
	width: 120px;
	text-decoration:none; 
	color:#000000; 
	background:#fff;
	margin-top: 1px;
}

li:hover ul, li.over ul{ /* lists nested under hovered list items */
	display: block;
}

#dmenu li>ul { 
	top: auto;
	left: auto;
}

#content {
	clear: left;

}
-->

#dmenu {
	font-family: Georgia, Helvetica, Sans-Serif;
	font-size:10px;
	text-align:center;
	font-color: #000000;
}

.topmenutitle {
	background:#fff; 
	text-indent:0px;
	text-decoration: none;
	padding:0px;	
	padding-top: 1px;
 	padding-bottom: 1px;
	color:#000000;
	width: 120px;
}

.submenuul {
	background-color:#fff;
	background-position: top left;
}

.submenuli a{
	text-decoration: none;
	color: #000000;
	padding-top: 3px;
 	padding-bottom: 3px;
}
.submenuli a:link{
	color:#000000;
	}
.submenuli a:visited {
	color:#000000;
	}
.submenuli a:hover{
	text-decoration: none;	
	background:#fff;
	color: #cccccc;
	padding-top: 3px;
 	padding-bottom: 3px;
}

http://www.rich-carey.com/rc-alpha/index.php?c=files&content=misc

A problem with my CSS means the columns arent equal, any ideas? ive tried several things, and JUST got colour on the right side now.

Someone said something about problems with floats but i didnt quite udnerstand it

On my website IE6 is rendering a menu bar with side blocks (the 2nd green bar down in the header area). See it here. Can anyone advise a work-around?

Thanks

First of all I just updated my Dreamweaver from 2004 MX to CS4. I have not used CSS before.

I now want to update my sites to XHTML 1.0 Transitional and thought I would start using CSS.

I am having trouble with the text losing or changing color and size once it gets posted. It looks fine in browser preview.

So first some general questions. What is the difference between assigning properties to heading or class? Do I or should I use both the heading and class on a bit of text? Do I attach the style sheet to the template or to just the pages? All my pages are made from one template.

I have several books, that tell how to create style sheets, but not what to do with this problem!


Thanks, Jill

My navigation displays correctly in IE 7+ and Mozilla Firefox, however in IE Under 7 the navigation places a double line and adds additional padding to the navigation. Does anyone have a remedy for this problem?

Hi guys,

I am in the process of refreshing my site however cannot seem to figure out a specific iOS rendering issue.

On iOS devices (I have tested on an iPad and a iPhone 4), the menu on my website displays on the first visit, but then disappears. I cannot reproduce this on a regular desktop browser, but can reproduce the rendering issue on the iOS simulator.

The CSS file is located here and the corresponding validator result link is here.

This is what it looks like on first visit:



And this is what happens when I refresh the page:



I'm really at a loss to understand where I might be going wrong, and would be grateful for any assistance.

The CSS rules for the menu specifically a

Code:

/* !Navigation */
#menu {background: #393 url(../images/menu.png) no-repeat !important; width: 744px; height: 40px; position: relative; margin: 170px 0 0 0; padding: 0;}
#menu li {float: left;}
#menu li a, #help li a {position: absolute; margin: 0; padding: 0; display: block; text-indent: -9999px; overflow: hidden;}
#menu li a {height: 40px;}


/* Normal State */
li#home a {left: 0; width: 79px;}
li#about a {left: 84px; width: 75px;}
li#journal a {left: 164px; width: 89px;}
li#origami a {left: 258px; width: 97px;}
li#stuff a {left: 360px; width: 65px;}
li#links a {left: 430px; width: 65px;}
li#contact a {left: 500px; width: 93px;}


/* Hover & Current State */
li#home a:hover, #snkhan_home li#home a {background: url(../images/menu.png) 0 -40px;}
li#about a:hover, #snkhan_about li#about a {background: url(../images/menu.png) -84px -40px;}
li#journal a:hover, #snkhan_journal li#journal a {background: url(../images/menu.png) -164px -40px;}
li#origami a:hover, #snkhan_origami li#origami a {background: url(../images/menu.png) -258px -40px;}
li#stuff a:hover,#snkhan_stuff li#stuff a {background: url(../images/menu.png) -360px -40px;}
li#links a:hover, #snkhan_links li#links a {background: url(../images/menu.png) -430px -40px;}
li#contact a:hover, #snkhan_contact li#contact a {background: url(../images/menu.png) -500px -40px;}

Any suggestions welcome!


Saj

Hi,

Does anyone have any Ideas how to fix the two rendering bugs shown in the screenshots below?

In IE5.5 The two top bars that stretch across the screen stretch too far distorting the page slightly. (Circled in red).

http://www.explosiveracing.net/test/render_bugs/ie55.jpg

In NN6 the backgrounds on the table cells do not fill correctly looking unsightly. (Circled in red). If you compare this to viewing the site in FF then you can see what I mean

http://www.explosiveracing.net/test/render_bugs/nn6.jpg

Site: http://www.explosiveracing.net/test/

Hi,

I have a problem with a menu i made:
http://www.kbskameleon.nl/kameleon2/

In internet explorer the red dots apear and disapear...

how can i fix this?
Code:

body { 
        background: #EBEBEB; 
        behavior:url("csshover.htc"); 
    } 
     
    #menu * { 
        font-family: Century Gothic, Arial, Helvetica, sans-serif ; 
        font-size:12px; 
        color:white; 
    } 

    /* the menu */ 

    #menu ul,#menu li,#menu a { 
        display:block; 
        margin:0; 
        padding:0; 
        border:0; 
    } 

    #menu ul { 
        width:150px; 
        background:#5B3C66; 
        list-style:none; 
    } 

    #menu li { 
        position:relative; 
        padding:1px; 
        padding-left:10px; 
        background:url("menuicoon.gif") no-repeat; 
        z-index:9; 
    } 
        #menu li.folder    { background:url("menuicoon.gif") no-repeat; }         
        #menu li.folder ul { 
            position:absolute; 
            left:120px; /* IE */ 
            top:5px; 
            border:1px solid #9d9da1; 
        }         
            #menu li.folder>ul { left:140px; } /* others */ 

    #menu a { 
        padding:2px; 
        border:0; 
        text-decoration:none; 
        color:white; 
        font-weight:normal; 
        width:100%; /* IE */ 
    } 
        #menu li>a { width:auto; } /* others */ 

    #menu li a.submenu { 
         
    } 

    /* regular hovers */ 

    #menu a:hover { 
        border-color:gray; 
        background-color:#8F8FCB; 
        color:black; 
    } 
        #menu li.folder a:hover { 
            background-color:#8F8FCB; 
        } 
     
    /* hovers with specificity */ 
     
    #menu li.folder:hover { z-index:10; }         
         
    #menu ul ul,#menu li:hover ul ul { 
        display:none; 
    } 

    #menu li:hover ul,#menu li:hover li:hover ul { 
        display:block; 
    }

Hello Gang!

First off, thank you for taking your time to help a noob.

Here is my problem:

With what I think is the same coding, the page is displaying two different ways. (see image). The left-hand column is made by using <?php include("news.htm"); ?> so I know for sure there are no differences between the pages (at least is that section).

Can anyone spot why the pages render 2 different ways?

LINK 1
LINK 2

Thank you for your time.