CSS - Css Issue Or Html Issue?

A web site I am working on is artepizzeria.com and for some reason it is not rendering correctly in internet explorer version 6. The content is just disappearing completely.

Your help is much appreciated.

-Troy Oltmanns

I have this website he galeriashqiptare.net
With Firefox looks everything fine, but with IE the logo is not showing at all. Any idea where may be the problem and how to fix it?

Regards.

Hi to all

I am having some issues with a few of my sites... they all work fine on PC and on IE and FF etc. but last time i viewed one of them on a MAC while i was overseas it had some errors where i use CSS tags for bg tiled images...

my portfolio is at http://www.blackdropdesign.com/portfolio.html
is it possible for someone who uses a mac to quickly run through these and let me know which ones arent working and why...? is there any way for me to see what my site would be looking like on a mac from my PC?

cheers!

I am having an issue with IE using the .htc file to render the CSS menu system I have. I am not sure why though. I think it has to do with the server that I have the site up on. Unfortunitly, I am unable to do anything to the server, so I will have to work around this issue.

The menu system works the way it should in Firefox, but not IE. So if you can look at it (in Firefox) and help me figure out what I need to do to make it work in IE I would greatly appreciate it.

The site is: www.fired-up.ca

So, on this page http://www.infothreads.com all 8 of the tshirts show up in Firefox, however, only 4 of them display in IE 6 or 7. Oddly, I can see the products when viewing the code in IEx, they're just not showing up on the site, which leads me to believe I done did something wrong with css. Any thoughts?

Thank you.

Hello all

On the following page:

http://planning.northumberland-national-park.org.uk/

if viewed in Mac IE (I believe version 5.0), the dotted lines below each left-hand menu item extend beyond the width of the menu across the whole of the main frame. The menu is a <ul>. The CSS is located at http://planning.northumberland-national-park.org.uk/css/style.css.

Does anyone have any ideas?

Thanks

Tom

First take a look at the site in firefox or chrome:
cristianoronaldo(dot)info

as you can see the footer works great. However, when the site is viewed in IE (specifically IE8) the footer is displayed in the middle of the page. This happens throughout the whole site/blog when browsing with IE8

I have tried many things, such as trial and error, but nothing seems to work.

Does anyone have any ideas on how to go about this?

Hi there,

I need to use transparent PNGs in this site I'm building. That's sweet when using Mozilla and Opera but for IE I'm using DXImageTransform.Microsoft.AlphaImageLoader.
My problem is that I'm using this in a text link area and the PNG is the background.
Whenever I apply the filter the PNG actually becomes transparent (yey for that) but (there's always a but with IE) I loose all the links inside the div area (text still there but does nothing at all). If I remove the filter the links get back online.

Any help REALLY appreciated.

Best regards

Hugo

nevermind it was a doc declaration issue

Hey folks,

I have one glitch that I can't get rid of (bear in mind I am in my second week of CSS thinking so go easy on me) - and have basically come here to ask your advice. I think I'll have to put a browser detection within the head especially for IE7 as it's a being a problem.

Here's the website:
http://www.three60design.com/sky_site/home.htm

it performs exactly as I like in FF and Safari but not IE. What do you think?

The second glitch is this:
http://www.three60design.com/sky_site/portfolio.htm

Within FF the content in each "box" is ok in FF, but in IE it overflows the box. I don't want to have a scroll in there ie overflow: scroll or auto.

What am I doing wrong!?

Cheers! REALLY REALLY appreciate it

Hey

I have a few containing divs and three divs in the last containing div so basically it's three columns.

Well, I'm trying to get the middle column to always span 100% height of the content, not the page. I have a min-height so it's not too small, but if the content is big, I want the column to basically stretch to fit the content inside.

Here is the pertaining code:
Code:

html,body {
font-family: verdana, arial, helvetica;
margin: 0px;
padding: 0px;
height: 100%;
}

#container {
padding: 0px;
border: solid 1px #fff;
width: 900px;
margin: 0px auto;
text-align: left;
background-color: #000;
min-height: 1000px;
height: 100%;
}
html>body #container {  height: auto; } // because Mozilla actually interprets the height:100% correctly..*sigh*

//  Second containing div
#content_main {
background-color: #000;
width: 900px;
height: 100%;
color: #000;
font-size: 11px;
margin: 0px;
}

// All columns
#leftcolumn,#middlecolumn,#rightcolumn { margin: 0px; min-height: 900px; }

// Middle column
#middlecolumn { width: 493px; height: 100%; float: left; margin-left: -10px; }
html>body #middlecolumn { margin-left: 0px; }

// Third containing div
#thecontent {
width: 460px;
height: 100%;
min-height: 400px;
float: left;
margin-left: 10px;
margin-top: 10px;
}

Pertaining HTML:
Code:

<div id="middlecolumn">
<div id="thecontent">
			<div id="contentheader"><p>'.$contentHeader.'</p></div>
			'.$form.'
			<div id="thecontent2">
				'.$pagecontents.'
			</div>
			<div id="contentbottom"></div>
			'.$formend.'
		</div>
</div>

Oh here are the other divs that are in "thecontent":
Code:

#thecontent2 { 
width: 445px;
min-height: 600px;
background-color: #fff;
line-height: 1.8em; 
font-size: 11px; 
padding: 15px 0px 0px 15px; 
text-align: left;
margin-left: 10px;
height: 100%;
}
#contentheader {
background: url(images/contenttop.gif) no-repeat;
width: 488px;
height: 35px; 
padding-top: 3px;
text-align: center;
margin: 0px auto;
margin-bottom: -3px;
margin-left: -2px;
}
#contentheader p {
color: white; 
font-size: 14px; 
font-weight: bold;
margin-top: 6px;
}

#contentbottom {
background: url(images/contentbottom.gif) no-repeat;
width: 471px;
height: 28px;
margin-left: 3px;
}

Ok that's alot of code

IE does it correctly as I'm sure most of you know, but how can I get the 100%-height-content span for Mozilla?

Thanks

Hey i don't know if this can be fixed by now i have looked everywhere and tried everything.

i have a style sheet that does not work in IE6 and i don't know why.

Code:

body{
 margin: 0;
 padding: 0;
 line-height: 1.5em;
}

b{font-size: 110%;}
em{color:red;}

#maincontainer{
 width: 940px; /*width of main container*/
 margin: 0 auto; /*Center container on page*/
}

#topsection{
 background: #EAEAEA;
 height: 90px /*Height of top section*/
}

#topsection h1{
 margin: 0;
 padding-top: 12px;
 background: url(images/png_logo.gif) no-repeat right bottom;
}

#contentwrapper{
 float: left;
 width: 100%;
}

#contentcolumn{
 margin: 0 190px 0 188px; /*margins for content column. should be "0 right columnwidth 0 leftcolumn width*/
}

#leftcolumn{
 float: left;
 width: 188px; /*width of left column in pixel*/
 margin-left: -940px; /*set margin to that of -(maincontainerwidth)*/
 background: #C8FC98;
}

#rightcolumn{
 float: left;
 width: 195px; /*width of right column in pixel*/
 margin-left: -195px; /*set margin to -(rightcolumnwidth)*/
 background: #336699;
}

#footer{
 clear: left;
 width: 100%;
 background: black;
 color: #FFF;
 text-align: center;
 padding: 4px 0;
}

#footer a{
 color: #FFFF80;
}

.innertube{
 margin: 2px; /*margins for inner div inside each column (to provide padding)*/
 margin-top: 0;
}

A.menulink{
 display: block;
 width: 170px;
 text-align: left;
 text-decoration: none;
 font-family: arial;
 font-size: 11px;
 color: #000000;
 border: none;
 border: solid 1px #ffffff;
}

A.menulink:hover {
 border: solid 1px #6100c1;
 background-color: #f0e1ff;
} 

the html code is Code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">  

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
  <link href = "style.css" rel = "stylesheet" type = "text/css">
<title></title>
</head>

<body>
  <div id="maincontainer">
      <div id="topsection"><div class="innertube">
            <h1>PowerNet Global 
            </h1>

      </div> 
  </div>

  <div id="contentwrapper">
      <div id="contentcolumn">
         <div class="innertube">
                  Thank you for visiting PowerNet Global, please ignore the mess as we update our site to bring you more up 
to date information to help you needs a little better.  The site may continue to change over the next few months, if you have
 any suggestions on how to improve our site to bring you better service please feel free to eamil us at
 <a href="mailto:support@pngusa.net">Support@pngusa.net</a>
                  <script src="http://gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/tabnews.xml&up_ned=us&up_items=7&up_show_image=0&up_font_size=13pt&up_selectedTab=0&up_tabs=&up_last_url=&synd=open&w=315&h=260&title=Google+News&lang=en&country=ALL&border=%23ffffff%7C0px%2C1px+solid+%23004488%7C0px%2C1px+solid+%23005599%7C0px%2C1px+solid+%230077BB  %7C0px%2C1px+solid+%230088CC&output=js" type="text/javascript">
                  </script>
         </div>
      </div>
   </div>


     <div id="leftcolumn">
        <div class="innertube"><strong>Navigation</strong>
           <table border="0" width="180">
                <tr>
                  <td ><h5>Sevice Information</h5>
                  </td>
                </tr>
                <tr>
                  <td width="100%" bgcolor="#e6e6e6"><a href="services.html" class="menulink">Overview Of Services</a>
                  </td>
                </tr>
                <tr>
                  <td width="100%" bgcolor="#e6e6e6"><a href="http://webmail.pngusa.net/src/login.php" class="menulink">View Mail</a>
                  </td>
                </tr>
               </table>
         </div>
    </div>
   
    <div id="rightcolumn">
      <div class="innertube">
          <script src="http://gmodules.com/ig/ifr?url=http://blog.outer-court.com/homepage/miniweb.xml&synd=open&w=180&h=330&title=Mini+Web&border=%23ffffff%7C0px%2C1px+solid+%23004488%7C0px%2C1px+solid+%23005599%7C0px%2C1px+solid+%230077BB  %7C0px%2C1px+solid+%230088CC&output=js" type="text/javascript">
          </script>
      </div>
     </div>

       <div id= "footer">
           <a href="http://www.pngusa.net">Go back Home</a>
       </div>
</div>



</body>
</html>

"

In IE6 the right column does not show up and i am unable to give a link as it is on internal test server.

I am not familiar with CSS much at all, I am just edit over and over trying to make something work, I do not know if my problem is CSS or placement of the div in the code.

if you visit mypricesavings (dot) com with Firefox it seems to have the footer in its proper place and the google ad is under the discussions, however, if you use google chrome the footer moves to the side of the categories, and the ad moves to the bottom leaving a large white space, and then shifts

how do I fix this,

thank you

Derrick

When I resize the browser then scroll across my div tag images move along. Last time I fixed this problem with "min-width:100px;" etc but now it won't work.

Hoping someone can figure out this problem :P

<html>
<head>
<link rel="stylesheet" type="text/css" href="layout.css"/>
</head>
<body bottommargin="0" leftmargin="0" topmargin="0" >
<div id="designLayout" align="center">
<img src="echo_rain.jpg" alt="" />

<div class="button_facebook">
<form>
<input type="button" value="" class="button_fb" onclick="window.location.href='()">
</form>
</div>
<div class="button_twitter">
<form>
<input type="button" value="" class="button_tw" onclick="window.location.href='()">
</form>
</div>
<div class="button_soundcloud">
<form>
<input type="button" value="" class="button_sc" onclick="window.location.href='()">
</form>
</div>
<div class="button_youtube">
<form>
<input type="button" value="" class="button_ut" onclick="window.location.href='()">
</form>
</div>
</div>
</div>
</body>
</html>


@charset "utf-8";
/* CSS Document */

body {
background-color:#000;
}

.button_facebook {
top:-135px;
left:-230px;
width:0px;
height:0px;
position:relative;
}

.button_fb {
background:url(facebook.png) ;
border:none;
width:80px;
height:80px;
}

.button_fb:hover {
border:none;
background:url(hover_fb.png);
width:80px;
height:80px;
}

.button_twitter {
top:-135px;
left:-115px;
width:0px;
height:0px;
position:relative;
}

.button_tw {
background:url(twitter.png) ;
border:none;
width:80px;
height:80px;
}

.button_tw:hover {
border:none;
background:url(hover_tw.png);
width:80px;
height:80px;
}

.button_soundcloud {
top:-133px;
left:0px;
width:0px;
height:0px;
position:relative;
}

.button_sc {
background:url(soundcloud.png);
border:none;
width:75px;
height:75px;
}

.button_sc:hover {
border:none;
background:url(hover_sc.png);
width:75px;
height:75px;
}

.button_youtube {
top:-138px;
left:115px;
width:0px;
height:0px;
position:relative;
}

.button_ut {
background:url(youtube.png);
border:none;
width:80px;
height:80px;
}

.button_ut:hover {
border:none;
background:url(hover_ut.png);
width:90px;
height:90px;
}


Cheers in advance.

I am confident this is a css issue

http://www.sweetbyholly.com/index2.php

The navigation in the site above, in IE7 only, shifts to the left on hover. I can't for the life of me figure out why. Can anyone pinpoint this issue?

It seems the second nav item is loosing some margin or padding on the left on hover. I can figure it out.