CSS - Page Doesnt Resize Right-gets All Screwy

I have just moved to working with layers as opposed tables/cells.
Previously i had a table with three cells, at 86%, 4%, and 16% widths so it spanned the screen. The first cell's content only partly fills the cell, so when the browser is resized (made smaller), each cell stays on the same line and the table happily resize to the point where it can no longer get smaller before it wraps text I have tried to replicate this using 3 div's of the same width as the cells, with float left, however, the browser can hardly be resized at all from full screen without the third div moving onto the next line. If i make the 2nd and third divs larger it works slightly better, however the content does not look right in the layers Therefore can anyone point out how i might be able to achieve better DIV resize when the browser resizes please. Thanks very much

Ed

hmm why would my padding show up in FF but not IE

html
Code:

<div id="nav">
	<ul>
    	<li><a href="#">Nav 1</a></li>
        <li><a href="#">Nav 2</a></li>
        <li><a href="#">Nav 3</a></li>
        <li><a href="#">Nav 4</a></li>
        <li><a href="#">Nav 5</a></li>
        <li><a href="#">Nav 6</a></li>
        <li><a href="#">Nav 7</a></li>
    </ul>
</div>

css
Code:

#nav{
	background-color:#999999;
	width:1000px;
	height:50px;
	margin-left:auto;
	margin-right:auto;
}
#nav ul{
	margin:0px;
	padding:0px;
}
#nav li{
	display:inline;
	padding:0px;
	margin:0px;
}
#nav a{
	background-color:#FF0000;
	padding-bottom:20px;
	padding-top:20px;
}

Hi.

The main gallery image is pushed down from the top of the logo on the page below:

http://zombiemod.com/rm/nina2/main.php?g2_itemId=14

I want to move this block on the right up. I believe this uses the main-image-container div as shown below, but when I put a negative top margin on this div it doesnt move.

The is the CSS I tried for the main-image-container div:
Code:

margin-top: -70px;

This is the HTML:
Code:

<div id="content">
  <div id="main-image-container"  {if $theme.imageCount == 0}style="display:none"{/if}>
    {if $theme.imageCount > 0}
      <div id="slideshow-controlsx">
        <ul id="control-buttonsx">
    <li><button id="controls-left"><img src="{g->theme url="images/controls-left.png"}" alt="{g->text text="Left"}" /></button></li>
    <li><button id="controls-play"><img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Play"}" /></button></li>
    <li><button id="controls-right"><img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Right"}" /></button></li>
        </ul>
      </div>

Why didnt my negative top margin work?

<ul> doesnt work in IE properly?
I have problem with IE7 and <

code:

html:

<ul>
<li><a href="A.html">A</a></li>
<li><a href="B.html">B</a></li>
<li><a href="C.html">C</a></li>
</ul>

If I open site with IE7 pages B.html and C.html works fine, whereas A.html loose its css for navigation (ul a:link etc..)

any ideas?

code for css:

#containerNavigation {
margin: 0;
float: left;
width: 100%;
background: #990000;
}


#navigationHorizontal {
zoom: 1;
width: 750px;
margin: auto;
padding-right: 0;
height: 35px;


}

#navigationHorizontal ul {
float: right;
padding: 0;
margin: 0;
list-style: none;
width: 749px;




}

#navigationHorizontal li {
padding-right: 0;
margin: 0;
display: inline;

}

#navigationHorizontal li a {
float: left;
color: white;
text-decoration: none;
text-align: center;
background-color: #990000;
line-height: 35px;
margin: 0 0 0 0;
padding: 0 25px 0 28px;
font-size: 1.2em;

}



#navigationHorizontal li a:hover {
color: #FFF;
text-decoration: underline;
}

i know ie sux but,
i nearly fixed the columns height problem but there is still a problem ,,
site : http://www.bekirhoca.com/index2.asp
>> it looks nearly fine (instead of the image over the menu) when i add some content to the columns, height expands normally .
But in firefox it doesn't seem normal because of the -- #wrapper {float:left} -- tag. When i remove it firefox acts normally but ie dont , when i add it reverse. So is there an hack to make firefox not to see that float? or i dont know where i did the mistake !!???!!

and there is another problem ,, at 1280x1024 screen resolution the inner content expands, i want to fit it inside where it is between the right and the left cols.

and and and why the right column isnt fit in ff as in ie?? you can check the site's top image 's right corner and see what i mean > http://www.bekirhoca.com/index2.asp ,, its a little bit longer than as seen in ie

Hey gang,

My suckerfish menu wonk work properly in ie5.5 and ie6 but works fine in all the others... the problem is that if i hover over main link that drop down menu will appear but then wont stay there when i hover the mouse over the submenu.

i removed all the content from below the menu and suddenly it works, but my site needs content!

Has anyone had this problem before???

#navi
{
width: auto;
background: url(images/navi01.jpg) repeat-x top left;
}

#navi, #navi ul
{ /* all lists */
padding: 0px 0px 0px 26px;
margin: 0;
list-style: none;
height: 29px;
}

#navi a
{
font-weight: bold;
margin: 8px 0px 0px 0px;
color: #ffffff;
display: block;
width: auto;
padding: 0px;
text-decoration: none;
}

#navi li
{
float: left;

width: auto;
padding: 0px 26px 0px 26px;
}

#navi li ul
{
position: absolute;
width: 160px;
left: -999em;
padding: 7px 0px 0px 0px;
margin: 0px 0px 0px -17px;
}

#navi li ul li
{
width: 160px;
height: auto;
padding: 0px 0px 0px 0px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #cfcfcf;
border-left: 1px solid #ffffff;
border-right: 1px solid #cfcfcf;
overflow: visible;
}

#navi li ul a
{
background-color: #f2f2f2;
color: #1989d1;
padding: 3px 16px 4px 16px;
margin: 0px;
}

#navi li.heading
{
border-top: 1px solid #7fa7bf;
border-bottom: 1px solid #67889b;
border-left: 1px solid #7fa7bf;
border-right: 1px solid #67889b;
}

#navi a.heading
{
background-color: #799eb5;
color: #ffffff;
padding: 3px 16px 4px 16px;
}

#navi li:hover ul, #navi li.sfhover ul
{ /* lists nested under hovered list items */
left: auto;
}




<script type="text/javascript">

<!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("navi").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>

</script>
</head>
<body>
<div id="border">
<div id="container">
<div id="content_left">
<div id="header"><div id="header01"></div></div>
<ul id="navi">
<li>
<div><a href="">About Us</a></div>
<ul>
<li><a href="">History</a></li>
<li><a href="">Staff</a></li>
<li><a href="">Employment</a></li>
</ul>
</li>
<li>
<div><a href="">Products and Services</a></div>
<ul>
<li class="heading"><a href="" class="heading">Support Services</a></li>
<li><a href="">Customer Support</a></li>
<li><a href="">Advanced Support</a></li>
<li class="heading"><a href="" class="heading">Professional Services</a></li>
<li><a href="">Engineering Services</a></li>
<li><a href="">Project Managemant</a></li>
<li><a href="">Software Development</a></li>
<li><a href="">Consulting</a></li>
<li class="heading"><a href="" class="heading">Solutions</a></li>
<li><a href="">Voice over IP (VOIP)</a></li>
<li><a href="">Information Lifecycle Management (ILM)</a></li>
<li class="heading"><a href="" class="heading">Procurement Services</a></li>
</ul>
</li>
<li><div><a href="">Contact Us</a></div></li>
<li><div><a href="">Links</a></div></li>
<li><div><a href="">News</a></div></li>
</ul>

I have read a few posts but could not find one that was similar. I have a center column where I will be putting text. Here is structure for the center column.

#center
{
margin-left: 160px;
margin-right: 205px;
margin-top:0px;
padding:0px 0px 0px 0px;
background-color:transparent;
}


When I put text inside it, and use the <p> tags,


p
{
margin: 0px 12px 0px 2px;
font-size:small;
font-family:Veranda;
font-color:#000000;
padding-bottom:10px;
pading-top:20px;
}

in netscape and firefox the margin is perfect on the left. In IE, however, the margin of the first paragraph is about 2pixels from the left.

I know there is something in the box model I am not taking into consideration.

any info would be great

thanks

Hey, I have created a site but here is the 1 problem. My CSS doesnt work in firefox. But the site looks perfect in ie; does anyone know why this could happen. Thanks. I use font-family: etc...... color and bgcolor. Thanks.

i want to make a word Stretch across a givin width... when ever i set it to expanded, wider, or any of the others... nothing happens to the text.. does anyonw know how this works?

is text align restricted to div tags only? and/or block level elements?

and if so, how could i get the program names (ICQ, MSN, Yahoo!) to text-align:left..... and the contact info to align right.... do i HAVE to use a float for this?

http://defunctgames.com/contactinfo.htm

Hi all, thanks on the last post, hope you can help with this too.

I'm trying to get an image to display in a box, and repeat all along the box (only a 1 pixel image). But for some reason its not being picked up.

my code is:

Code:

<body>
    <div id="wrap">
        <div id="innerwrap">
             <div id="holding">
             holding
             </div>
        </div>
    </div>
</body>

and the css is this:

Code:

#wrap{width:60em;height:43em;background:silver;margin:0 auto;text-align:left; padding-top:.1em;}
#innerwrap{ background-color:gray;margin:.5em;height:42em;}
#holding {background:#3F8BCA url(/img/topgradient.jpg) repeat-x scroll left top;}

I've tried to change the brackets to forward brackets, tried to and ", but nothing works, im sure the spelling etc is correct...

any help would be great

Kind regards
MG

Hello,
I got a website with a table on it. This is how it looks in firefox 2.0:
http://img139.imageshack.us/img139/9822/helpffkr6.jpg
And here's how it looks in IE6:
http://img111.imageshack.us/img111/9675/helpiehi7.jpg
As you can see, where FF do display the table border, IE does not.

Here's the simplified table code and the related css code:
Table ->
Code:

<table class="listings" style="width: 100%;">
<tr>
   <td colspan="2" class="darkRow">Category 1</td>
</tr>
<tr>
   <td style="width: 30%" class="lightRow">Thread 1</td>
   <td style="width: 70%" class="lightRow">This is thread number 1.</td>
</tr>
<tr>
   <td style="width: 30%" class="lightRow">Thread 2</td>
   <td style="width: 70%" class="lightRow">This is thread number 2.</td>
</tr>
</table>

CSS code -> Code:

<style type="text/css">
table.listings{
	border-collapse: collapse;
	border-style: none;
}
table.listings tr{
	border-style: solid;
	border-color: #4D3D4D;
	border-width: 1px;
	vertical-align: top;
}
.darkRow{
	background-color: #4D3D4D;
	border-color: #4D3D4D;
	color: white;
	padding-left: 4px
}
.lightRow{
	background-color: #BFACBF;
	border-color: #4D3D4D;
	color: #4D3D4D;
	padding-left: 4px;
}
</style>

It seems as if IE doesnt support borders around a whole row, because when i add this:
Code:

table.listings td{
	border-style: solid;
	border-color: #4D3D4D;
	border-width: 1px;
	vertical-align: top;
}

With that also IE displays a border but not only around the whole row, but around all the cells individually, which is not my intention.

Does anybody have an idea what i can do about this?

thanks in advance.

I have created a dropdown menu for my site.
The dropdown works great in Firefox, safari and opera but it does not drop down in IE.

The menu is displaying ok in IE but when you hover over a tab nothing happens.

This is the link http://www.misi.co.uk/2_template.php There are two menus "navigation" which is the bottom category menu in grey and "navigation_blue" - which is the top bue tabs. I have the same problem with both menus.

I normally hash around to get IE to function as I wish however only having a mac infront of me its a bit of a pain as I have to ring a friend to check IE for me, if anyone knows of a browser test that allows you to check functions in IE please let me know, I use a couple but only get screen shots so its fine for layout checks but no good at testing drop down menus and the like.

Code:

/* Categories Bottom MENU */
 
#navigation {width:985px;height:50px;margin-top:-27px;}
#navigation ul {margin-left: -40px; text-align:center;}
#navigation li {height:21px;float: left; text-align:center;position: relative;background: url(/images/top-tab-lgt.png) no-repeat}
#navigation * {cursor: pointer;}
#navigation li a {text-align:center;width:87px;float:left; color:#333333; font-size:5px; display: block; padding-left:2px;padding-top:2px; text-decoration: none; }
#navigation li a span {float: left; display: block; line-height: 21px; height: 21px; padding: 0 6px 0 1px;}
 
.os_windows #navigation li a span {padding: 0 0px 0 0px}
 
#navigation li a {color: #000000; font-size: 11px; font-weight: 100; font-family: Arial, sans-serif; }
#navigation li a:hover {color: white; background-color: #e2e0e1;}
#navigation li {list-style:none;}
#navigation li:hover .navigation_hover,
#navigation li.hover .navigation_hover {visibility: visible;}
 
#navigation .navigation_hover {
  width: auto;
  position: absolute;
  top: 18px;
  left: -40px;
  margin: 0px;
  display: block;
  visibility: hidden;
  border-top: 0;
  z-index: 4;
}
 
#navigation .navigation_hover li {float: left}
 
#navigation .navigation_hover li a {
  float: none;
  padding: 0 2px;
  line-height: 21px;
  width: 110px;
  background: #e2e0e1;
  color: #000000;
  border: 0;
}
 
#navigation .navigation_hover li a:hover {
  background: #cc205c;
  color: white;
}
 
/* TOP TABS */
#blue_navigation {height:50px; text-align:right; margin-left: 265px; margin-top:-5px;}
 
#blue_navigation ul {text-align:right;  }
#blue_navigation li {height:40px; float: left; position: relative;list-style:none;background: url(/images/top-tab-blue.png) no-repeat;}
#blue_navigation * {cursor: pointer;}
#blue_navigation li a {width:135px; float: left; color:#333333; font-size:10px; display: block; text-align:center;padding-top:5px; text-decoration: none; }
#blue_navigation li a span{width:135px; float: left; color:#333333; font-size:10px; display: block; text-align:center;padding-top:5px; text-decoration: none; }
 
#blue_navigation li {list-style:none;}
 
 
#blue_navigation li a:hover {color: #0D7DC7; background: url(/images/top-tab-hblue.png) no-repeat}
#blue_navigation li:hover .blue_navigation_hover,
#blue_navigation li.hover .blue_navigation_hover {visibility: visible;}
 
.os_windows #blue_navigation li a span {padding: 0 0px 0 0px}
 
#blue_navigation .blue_navigation_hover {
  float: none;
  position: absolute;
text-align:left;
  width: auto;
  left: -40px;
  height:21px;
  margin-top: 20px;
  display: block;
  visibility: hidden;
   z-index: 4;
}
 
#blue_navigation .blue_navigation_hover li {float: left}
 
#blue_navigation .blue_navigation_hover li a {
  float: none;
    left: -85px;
  padding-top: 0px;
  line-height: 20px;
  color: #7c7c7c;
  border: 0;
}

Firefox works, IE doesn't Help with CSS pls :-)


Firefox: http://img144.imageshack.us/img144/...irefoxstone.jpg

Internet Explorer: http://img5.imageshack.us/img5/3856/explorerstone.jpg

Here is that part of css i believe is affecting it:

Code:

div.module h3 {
margin: 0px 0px 15px 10px;
font-size: 1em;
color: #FFEFD5;
text-transform: uppercase;
}

div.module {
margin-bottom: 25px;
padding: 5;
float: left;
clear: both;
width: 100%;
background: url(../images/bottom.jpg) repeat-x bottom left;
}

div.module div {
padding: 0px;
background: url(../images/left.jpg) repeat-y top left;
}

div.module div div {
padding: 0px;
background: url(../images/top.jpg) repeat-x top left;
}

div.module div div div {
padding: 9px 9px 20px 9px;
background: url(../images/right.jpg) repeat-y top right;
}

div.module div div div div {
margin: 1;
padding: 3;
background: url(../images/parchtexture.jpg);
}

==================

I have seen this code in some index files

Some people put this in there index is this a code does this make your index.php use a different css file depending on the browser you use?

Code:

<!--[if lte IE 6]>
<style type="text/css">
.clearfix { height: 1%;}
#ja-cssmenu li { float: left; clear: both; width: 100%; }
</style>
<![endif]-->

<!--[if gte IE 7.0]>
<style type="text/css">
.clearfix { display: inline-block;}
</style>
<![endif]-->

An important part of my design is the background image. I have tried many different things but cannot seem to solve this. I have two options:

Option 1:
One placing the image in a tag within the body. Results where pretty good except in IE 6 the content is displayed under the image.

You can see the effect of option 1 on this portion of the site: http://woodysfireworks.nl/w/index.html
example

Code:

/*option1 background image*/
img.bg {
background-color:#000;
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;

/* Set up proportionate scaling */
width: 100%;
height: auto;
overflow:hidden;

/* Set up positioning */
position: fixed;
z-index:0;
top: 0;
left: 0;

}

@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}

Option2:
I placed the image in the style sheet and then included a class and id in the tag. Here the images get blown up in all version of IE.

example
Code:

/*option 2 background image*/
#start{ background:url(images2/426.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";}

I would really appreciate some insight. I am pulling my hair out.

Thanks