CSS - Css Panel Layout, Having Some Trouble With Ie

hello.

i'm totally new to this... just helping out a friend's site.

i started with a template i got from dreamweaver, and i built something that is almost there... except my right_col of images needs to be aligned on the right, in line with the right edge of the header graphic.

example of my probelm:
http://www.sableandbatalion.com/home/new_index_test.htm
corressponding css file:
http://www.sableandbatalion.com/css/3col_rightNav.css
(there are some definitions in this file that i have not used and have not deleted yet, but everything is well-labelled, so it shouldn't be an issue figuring what i'm using, especially when you see my html code, duh!)


this version works on firefox, but not on IE ( this is meant only to show what i'd like it to look like, but i'd much much much prefer to work with the version above) :
http://www.sableandbatalion.com/home/index_test.htm
corresponding css file:
http://www.sableandbatalion.com/css/driver.css

help!!

thanks in advance from a total novice who is having lots of fun playing with dreamweaver! man this program is great!

-adam

ps. explain things to me like im 4-year old - once again, im a newbie!

What I currently have:
dubdubdub.cybercan.co.uk/wavelength

I'm trying to create this (don't laugh):

dubdubdub.cybercan.co.uk/wavelength/layout.jpg

(centred and with the gradient filling the whole background).

I need the height to be 100% (the drop shadow to the bottom of the screen) with the footer (swirly line and social network links) always at the bottom of the page but visible. I've got no idea what's going on and it's driving me round the bend. I've obviously also got to do the menu and the centre image but I'll have a think about that when I get to it.

Some advice would be really helpful...If I'm way off the mark with what I've done I'll gladly pay someone to help me out on this one as it's been a real pain...

Thanks,

Richard

PS I'm really really sorry for including the web links but I couldn't think of any other way to explain what I meant.

Hi, I'm an amateur web designer, so I imagine my problem is probably something infantile to you all, but perhaps not.

I've got a page layout that includes three vertical content areas. One is a left menu bar, the middle is content, and the right is a Google Adsense banner add. My problem is that I've got the main content div position set to relative in CSS, but if the content doesn't extend past 600px then then Google banner expands out over my layout.

I thought it was as simple as setting the right_content area, where the banner resides, to relative as well, but that starts the banner wherever the main content area ends... way down on the page. I also considered just setting the main content area to 600px tall, and if content goes beyond that then it will expand the layout because it's set to relative position.... but that doesn't work in Firefox... the main content ends up expanding out over the layout.

Anyway, I'm probably being really stupid about this, but I just can't figure it out. I've attached my html and css... sorry it's so big and messy, I didn't know what you would need.

Hello! I hope someone can help me!

Im trying to adapt a bigcartel css style sheet to make it a 4 row product column rather than 3. I just cant seem to get it correct when playing with the wrap, content and main content. The width seems to jump only from 3 to about 8!

Im not actually hosting the theme myself to edit but just simply copied and pasted the css from a link provided straight into the basic design section in big cartel. It seems to be doing the trick but i cant get the spacing perfect to make it 4 columns wide!?

Does anyone know if its because i need to actually host the template and images on my own server to be able to get it perfect?

Any help to perfect this would be very much appreciated!

Thanks so much in advance,
Weesy

Hi All.

I am just trying to figure out how to make the bottom
border of the active tab disappear so it looks like the
active tab is part of the active panel.

For example:

http://wiki.modxcms.com/images/a/aa/Tabs3.png

THE CSS

Code:

<style>
#tabs {
padding: 10px;
}
#tabs #nav {
margin-bottom: 0px;
margin-left: 8px;
}
#tabs ul {
list-style: none;
margin: 0px;
padding: 0px;
}

#tabs #nav ul li {
display: inline;
padding: 3px 7px;
cursor: default;
background-color: #eeeeee;
border: 1px solid #cccccc;
border-bottom: none;
margin-right: 2px;
}
 
#tabs #nav ul li.active {
border: 1px solid #000066;
border-bottom: 1px solid white;
background-color: #ffffff;
}
 
#tabs #nav ul li:hover {
background-color: #ffffff;
}
 
#tabs #data {
margin-top: 3px;
}
 
#tabs #data div {
display: none;
border: 1px solid #000066;
padding: 10px;
}
 
#tabs #data div.active {
display: block;
}
</style>

THE javascript:

Code:

 <script type="text/javascript" language="javascript">
        function navAllInactive() {
              oNav = document.getElementById('nav');
              oLis = oNav.getElementsByTagName('LI');
       
                for (i = 0; i < oLis.length; i++) {
                    oLis[i].className = '';
                }
        }
       
      function hideAllData() {
        oData = document.getElementById('data');
        oDivs = oData.getElementsByTagName('DIV');
       
        for (i = 0; i < oDivs.length; i++) {
            oDivs[i].style.display = 'none';
        }
      }
       
      function doShow(o, pageId) {
        hideAllData();
        navAllInactive();
        o.className = 'active';
        oData = document.getElementById(pageId);
        oData.style.display = 'block';
        return false;
      }
  
      </script>

THE HTML:

Code:

<div id="tabs">
<div id="nav">
<ul>
<li onclick="javascript:doShow(this, 'relevance');" class="active">Relevance</li>
<li onclick="javascript:doShow(this, 'added');">Date Added</li>
<li onclick="javascript:doShow(this, 'recorded');">Date Recorded</li>
<li onclick="javascript:doShow(this, 'rating');">Rating</li>
</ul>
</div>
<div id="data">
<div id="relevance" class="active">Relevance</div>
<div id="added">Date Added</div>
<div id="recorded">Date Recorded</div>
<div id="rating">Rating</div>
</div>
</div>

If you have a second.....

Doing a design for my brother and I have this idea that seems so simple but I can't figure it out. I attached a image that explains it better than I could in an a post. Here is the site: anthemcompanies.com/index2.html

Here is the image to explain it (can't insert an image so it is a link) anthemcompanies.com/screen.png

I would like to use just CSS to accomplish it but I have no idea how.

I have searched everywhere online. I have tried adapting some jquery scripts and some js stuff but nothing has worked for me. Advice, links, completely explained solution, or I have no idea, would be most appreciated.

Hey Everyone!

I'm having issues with a custom sliding panel showing correctly in IE. It works EXACTLY as I'd like in Firefox, but breaks in Internet Explorer.

I tried different positioning items, and tweaking everything I could think of, but it would appear that I'm stumped.

knockoutsadvertising[dot]com/gaptest/

In the right hand sidebar, clicking 'Learn More' will open the panel. There's a link within the panel to close it again. Any help on how to get this thing positioned correctly in IE would be awesome.

Brad

Ive got a couple navigation blocks on the left hand side of the page, now when i use:

<form>
<div>
A couple menu links go here
</div>
</form>

then in Mozilla no gap is displayed, yet in IE a gap at the top and bottom appear outside the div tags, as it is written in the code.

if i place the form tags within the div tags then the gap is at the top and bottom of the menu links, (for IE). Yet for Mozilla only a gap appears below the links when the form tags are within the div tags.

Is there any way to get rid of these gaps?

you can check the site he
http://wiganyac.hellrazer.net/

This topic may have been covered before, but I have searched and can't
find anything. I think it is a unique topic. My boyfriend and I have
a php site, http://biggt.mybesthost.com, we are having trouble that
only shows up in the administrator part. For example, when a topics post
is made, the font is different like the comment.link
_DATESTRING

The chatters is
different. Any help to solve this would be greatly appreciated. Thanks

Hello, I am using an OS Commerce layout for a client's website. On this page - www.mts-diesel.com you will see how I have the homepage laid out in anticipation of design, with 3 divs of varying colors. One div with an id of #hp_left is where I want to put a nice jquery code. But when I insert that into #hp_left it breaks the whole layout, was seen here www.mts-diesel.com/index2.php I'm not sure what in the css in the code for this script is breaking my layout but Ithought someone here might be willing to shed some light. A big thank you. Tom

I am working on the new home page which is based on a template.

The left sideColumn is working fine, however I am having a few problems with the mainColumn layout.

Here is a static image to show what I want it to look like

Here are the problems I am having:

1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden.

There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want.

2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css:

#home img {
margin: 5px auto 5px auto;
}

which I thought would do the trick, but it's not.

3) I want the p text to have a 40px margin on the right and left side like the .large does.

Here is what I have for the css:

#home p, .large {
margin: auto 40px auto 40px;
}

It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why.

Here is the xhtml starting at the 2 column part (wrapper): Code:

  	<!--begin wrapper-->
  	<div id="wrapper">
  
  	<!--begin side column -->
  	<div id="sideColumn">
        <span class="category">Products</span>
    <ul>
		<li><a href="/products/spirometers.html">Spirometers</a></li>
		<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
		<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
		<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
		<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
	</ul>
	
	<span class="category">Resources</span> 
    <ul>
      <li><a href="/resources/contact_us.html">Customer Support</a></li>
	  <li><a href="/resources/training_services.html">Training & Services</a></li>
      <li><a href="/resources/exhibitions.html">Exhibitions</a></li>
      <li><a href="/resources/newsletters.html">Newsletters</a></li>
      <li><a href="/resources/downloads.html">Downloads</a></li>
      <li><a href="/resources/useful_links.html">Useful Links</a></li>
      <li><a href="/resources/industry_information.html">Industry Information</a></li>
	  <li><a href="/resources/industry_information.html">Sitemap</a></li>
	</ul>
  </div>
  <!--end of side column -->
  
  <!--begin main column -->  
  <div id="mainColumn">
  
  	<!-- InstanceBeginEditable name="Main_Section" -->
  
  
  
    <div id="home">	
        <div id="scroll"><span>scrolling news will go hear and stop</span></div>
		
        <img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
	
		<span class="large">Welcome to Vitalograph</span>
		
		<p>Vitalgraph offers a wide range of spirometers along with other asthma 
          management equipment with over 40 years experience. From simple hand-held 
          units to sophisticated Windows based spirometry systems, we have it 
          all. Check out our full line of respiratory equipment under the product 
          category.</p>
		
		
      <p><a href="/about_us/about_us.html">more about us...</a></p>
		
		
	</div>
  
  
  <!-- InstanceEndEditable -->
  
  </div>
  <!--end of main column -->
  
  </div> 
  <!--end of wrapper--> 

Here is the vitalograph_master.css: Code:

body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	background-color: #ffffff;
	color: #515151;
	margin:0px;
	padding:10px;
}

/*page container settings*/

#page {
	width: 750px;
	height: 600px;
	border: 1px solid #5094F9;
	background-color: #FFFFFF;
	overflow: hidden;
	margin: auto;
	padding: 10px 10px 10px 10px;
	text-align: left;
}

/*logo header and tag settings*/
	
#header {	
	margin: 0;
	padding-bottom: 5px;
	width: 450px;
	height: 36px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	text-align: left;
}

#header img {
    vertical-align: -7px;
    }

.tagline {
	color: #5094F9;
	font-size: 16;
	font-style: italic;
	font-weight: bold;
	display: inline;
	clear: both;
	line-height: 20px;
	margin-left: 10px;
}

/*top bar settings*/

#topbar {
	float: top;
	height: 20px;
	background-color: #5094f9;
	clear: both;
	padding-left: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:link, #topbar a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:hover, #topbar a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#topbar ul {
	list-style: none;
	margin: 0;
	padding-top: 2px;
}

#topbar li {
	display: inline;
	margin-right: 160px;
}

/*Main Section two columns under top section*/

#wrapper{
	padding: 10px 10px 10px 0px;
	width: 100%;
	height: 100%;
}

#sideColumn {
	float:left;
	width:155px;
	height: 78%;
	background-color: #5094F9;
	padding-top: 50px;
	padding-left:10px; 
	padding-bottom:10px;
	pading-right: 10px;
	margin-right: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-weight: bold;
	line-height: 20px;
}

.category {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 5px;
}

#sideColumn a:link, #sideColumn a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn a:hover, #sideColumn a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn ul {
	list-style: none;
	padding: 15px 0px 15px 10px;
	margin: 0px;
}

#mainColumn {
	padding: 0px;
}

/*footer*/

.footer {
	font-family: "Times New Roman", Times, serif;
	font-size: 9px;
	color: #999999;
}

/*text*/

.large {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
}

Here is the home.css: Code:

/*home page*/

#home {
	margin: auto;
}

#home img {
	margin: 5px auto 5px auto;
}

#home p, .large {
	margin: auto 40px auto 40px;
}

#home a:link, #home a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#home a:hover, #home a:active {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #990099;
	font-size: 12px;
	font-weight: bold;
}

#scroll {
	width: 560px;
	padding: 5px;
	background-color: inherit;
	border: 1px solid #5094F9;
	margin-bottom: 5px;
}

Any help or suggestions are greatly appreciated.

Hi there and thanks for reading & helping! I am new to this site, but here is my question:

I need to build about a 20 page website. I have been told I should do the "layout" for each page using CSS. Is it possible for each page to "link" to one CSS file for layout instructions? I have found suitable CSS layout templates but am unsure how to link each page to the external CSS file for a basic "header, 2 column, footer" layout, or if it is even possible?

This is my css file : BODY { font: 11px geneva, verdana, arial, sans-serif; color: #89A1BD; }
TH{ font: 11px geneva, verdana, arial, sans-serif; color: #3D3D3D; }
A:active { font: 11px geneva, verdana, arial, sans-serif; color: #00000; text-decoration: none; }
A:hover { font: 11px geneva, verdana, arial, sans-serif; color: #0000FF; text-decoration: underline overline; }
A:link { font: 11px geneva, verdana, arial, sans-serif; color: #000000; text-decoration: none; }
A:visited { font: 11px geneva, verdana, arial, sans-serif; color: #000000; text-decoration:none; }

#poll{ ;border-style : solid ;border-color : #004f9d ;border-width : 2px}
#poll tr td dt{font-family: Small Fonts;font-style : normal ;font-size : 7pt; font-weight :bold }

select, input, textarea { font: 10px geneva, verdana, arial, sans-serif; color: #3D3D3D; }
.pn-top {BACKGROUND: none; COLOR: #FFFFFF; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none}
.pn-title {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none}
.pn-title:link { color:#FFFFFF; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none}
.pn-title:active { color:#FFFFFF; FONT-SIZE: 11px;FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none}
.pn-title:hover { color:#0000FF; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none}
.pn-title:visited { color:#CC0000; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none}

.pn-link {BACKGROUND: none; COLOR: #0000000; FONT-SIZE: 11px; FONT-WEIGHT: normal; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none}
.pn-link:link { color:#000000; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none}
.pn-link:active { color:#FFFFFF; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none}
.pn-link:hover { color:#0000FF; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: underline overline}
.pn-link:visited { color:#000000; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none}


.date {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif; TEXT-DECORATION: none}

body {
SCROLLBAR-FACE-COLOR: #B7C6E5; SCROLLBAR-HIGHLIGHT-COLOR: #D3DCEF; SCROLLBAR-SHADOW-COLOR: #738FCC; SCROLLBAR-3DLIGHT-COLOR: #E9EEF8; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #E5EBF4; SCROLLBAR-DARKSHADOW-COLOR: #4870AA;
; background-color: D8E0E9
}
FONT { font: 11px geneva, verdana, arial, sans-serif; color: #0000000; }
TD { font: 11px geneva, verdana, arial, sans-serif; color: #3D3D3D; ; top: 20pt; clip: rect( )}



And my text is just normal black en when i go over it , it will turn blue it always works perfect if theres no link specified ex. when "href" is empty then it works but if its links.html and that page exitst then it stays black when i go over it , i've tried much changes in my css sheet but it doensn't seems to work

OK, I thought I was so smart. Working on a site that is 100% CSS AND Priority 3 WAI compliant, and thought I had it - it looked good on PC IE, Mozilla and Safari...only to be shot down by Mac IE 5.5, which I know is a bit of a black sheep in terms of CSS. Can those of you with knowledge of such things take a look at:

http://www.getbrightstar.com/v2/

And let me know why Mac IE 5.5 wouldn't float the columns correctly? The tricky part is that *I* don't have a mac and can't find an IE 5.5 emulator online like safari, but my client DOES have one and she uses IE 5.5, so it would be best if I could get it right the first time...I don't want to use my client for compatibility testing.

Thanks,
-Daniel