|
CSS - Ie:mac Doing Weird Things To Layout
I am redesigning this site in a css layout, and I've had minimal problems so far, but IE:mac (of course) is doing some weird things.
Example One: The header of the search box is stretching to the right, when the googleads box is floated right. Eample Two: The ul in the left side bar is placing the bullets outside of the wrapper and is aligned to the left side of the browser. The rollovers have also been slow in other browsers. These are my two main issues. If there are any other suggestions as to how I could lay this out more efficiently, it would be much appreciated. Thanks! Site CSS Similar Tutorialshello, this is my first post so apologies if i give too much information, but rather than miss something crucial, i thought it best to cover all my bases. i am new to CSS and have been trying to reproduce a design that i created as an image, in CSS for a website layout. i have managed the 'bones' of the website but am having difficulty when i get to the actual content. not being the most technical when it comes to CSS terminology, i have uploaded an image which shows what i want it to look like here a cut down version of the page, including just the area in question is available here XHTML css i validated my xhtml, but the css came up with warnings but didn't say it was invalid. i hope this is OK? in firefox it looks fine, but in IE 6, you can see that the photo of the product is not flush to the left of the bordered div. i'm not sure if i have gone about it the wrong way or if it is IE. a friend suggested that rather than have the 2 divs overlapping, i should just use a background image to create the effect, but being stubborn, i would like to try to fix this way, just for experience. would anyone mind having a look? hopefully i have provided enough info, but apologies if not. just ask and i will do my best to explain. thank you for your time J Hi, I'm trying to work a bit with divs Anyway, I got this atm: Code: #container {
margin: 0px auto;
width: 600px;
}
#menu-left {
float:left;
height:auto;
width:100px;
}
#menu-right {
float:right;
height:auto;
width:100px;
}
#content {
float:left;
width:400px;
top: 200px;
}
#article { background-color:#999999;
border:dashed 1px black;
float:none;
width:380px;
height:100px;
margin: 0 10px 0 10px}
So I got a container around all the other divs, 1 div on the left (menu-left), one on the right (menu-right) and inbetween them the (content) div. In the content I got the (article) div, I want to have more of those underneath eachother after a while. Now normally the width of the Article div would equal 400 as well and fit perfectly between menu-left and menu-right. Yet it doesnt fit PERFECTLY inbetween them. If I take 8px margin on the left it fits, how is this possible?? ___ EDIT ___ Without the 1px border it seems to fit, but why doesn't it fit WITH the border? Thanks! Here is my css code:
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;
}
#sidebar {
float:left;
width:140px;
height: 100%;
background-color: #5094F9;
padding-top: 50px;
padding-left:10px;
padding-bottom:10px;
padding-right: 10px;
margin: 10px 10px 10px 0px;
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;
}
#sidebar a:link, #sidebar a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#sidebar a:hover, #sidebar a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#sidebar ul {
list-style: none;
padding: 15px 0px 15px 10px;
margin: 0px;
}
Here is my html code: Code: <body>
<div id="page">
<div id="header"><img src="images/vitalograph_spirometers_logo.gif" width="230" height="36" alt="vitalograph spirometers logo" />
<span class="tagline">world leaders in spirometry</span></div>
<div id="topbar">
<ul>
<li><a href="/home.html">Home</a></li>
<li><a href="/about_us/about_us.html">About Us</a></li>
<li><a href="/other_regions.html">Other Regions</a></li>
</ul>
</div>
<div id="sidebar">
<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">Contact Us/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>
</div>
</body>
If it is more helpful - This is a link to the actual html file to view I am going to turn it into a template with an editable main section (the large blank area to the bottom right. I think my problems are all with the sidebar id - but I could be wrong as this is my first attempt at css and tabless design. Ignore the search part - that is phase 2 so I am not messing with that at this point. Here are the problems I am trying to correct: 1) I want the sidebar column to extend to the bottom of the page container - 10px. Some page containers could be longer than 600px height - but that will be the minimum height of the container. Currently it goes down all the way to the page id border with no white space. I know this is because I put in height 100% - but what I really need is something like 100% - 10px - but that doesn't seem to be an option. The page container has 10 px padding but it doesn't seem to be making a difference. 2) The left side list navigation indentation has some problems. See the side bar here to see what I want it to look like The list navigation part should be indented 20px from the left edge of the sidebar (10px more than the category class). Currently in fox fire they are both 10px from the right edge. In IE they are indented way too much. As always any help is greatly appreciated. Thanks! i wanted to create a new thread because the new problems are not same as the one in my other thread so i thought best to create a new post. Site url: www.plumstead-mosque.co.uk Problem1: if you have the developer's extension for Firefox turn on the display>information>block size (useful for reference) and you will see that form starts right near where the UL/lists/menu starts and not after the menu which is strange Problem2: when i try adding border to the whole form element the border only appears on the label and not the input & submit button similarly that donate button is also a form but border isnt going around it... problem3: submenu font appears a bit smaller (in IE) problem4: when you hover over a menu link, the link turns a diff color and in FF you can go past the text and the cursor will remain in the "link" mode ie a hand but in IE if you hover past the text although the background color will remain the cursor will revert back to normal non-link mode problem5: if you do the css developer thing again, you will see that for some reason firefox makes items on left side appear to go out of screen ie making it seem as if the width of items is larger then what it seems I just spent an hour putting this together and previewing it in IE... then when i go over to my mac and preview in safari.. UGH!!! UGLY!... Then in firefox.. UGLY!.. Any help would be appreciated. Page is: reston.com/RESTON20/ Code:
@charset "utf-8";
/* RestonCOM 2.0 CSS */
/* 10/04/2008 */
/* Main Container Code */
#container{
height: inherit;
width: 1000px;
background-color:#FFFFFF;
margin-left: auto;
margin-right: auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
border-bottom: 1px double rgb(74,77,144);
border-left: 1px double rgb(74,77,144);
border-right: 1px double rgb(74,77,144);
}
/* HEADER CODE */
#header{
height: 149px;
width: 1000px;
background-image:url(COM20-BANNER.png);
}
/* NAVIGATION CODE */
#navi{
height: 25px;
width: 995px;
background-color: #44478a;
margin-bottom: 1px;
margin-top: 0px;
margin-left: 2px;
padding-left: 2px;
padding-top: 2px;
color: #FFFFFF;
}
/* LEFT SIDE PANEL CODE */
#leftbar{
height:inherit;
width: 270px;
background-color:#FFFFFF;
float: left;
margin-left: 1px;
}
/* LEFT-BOX CODE */
#leftbox{
height:inherit;
width: 281px;
background-color: #FFFFFF;
float: inherit;
border: 1px double rgb(74,77,144)
}
/* LEFT-BOX-TITLE CODE */
#leftbox-title{
height:inherit;
width:281px;
background-color: #44478a;
float: inherit;
color: #FFFFFF;
}
/* MIDDLE CONTENT CODE */
#content{
height: inherit;
width: 712px;
background-color:#FFFFFF;
float: right;
padding-left: 1px;
}
/* MIDDLE-CONTENT HEADERS */
#content h1{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-size:16px;
color:#000000;
font-weight: bold;
display: inline;
}
#content h2{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-size:12px;
color:#44478a;
font-weight: bold;
display: inline;
}
/* NEWSFLASH - BOX */
#newsflash{
width: 700px;
background-color:#000000;
}
/* NEWSFLASH - LEFT */
#newsflash-left{
width: 349px;
background-color:#44478a;
color: #FFFFFF;
float: left;
padding-left: 1px;
}
/* NEWSFLASH - LEFT - BOX */
#newsflash-left-box{
width: 345px;
background-color:#FFFFFF;
color: #44478a;
border: 1px double rgb(74,77,144);
float: inherit;
}
/* NEWSFLASH - LEFT - IMAGE */
#newsflash-left-image{
width: 50px;
height: 50px;
background-image: url(NEWSFLASH-LEFT-IMAGE.png);
float: left;
border-right: 1px double rgb(74,77,144);
}
/* NEWSFLASH - LEFT - TEXT */
#newsflash-left-text{
width: inherit;
height: inherit;
float: inherit;
font-size: 9px;
}
/* NEWSFLASH - RIGHT (EVENTS) */
#newsflash-right{
width: 357px;
background-color:#44478a;
color: #FFFFFF;
float: right;
padding-left: 1px;
margin-right: 1px;
margin-left: 1px;
}
/* NEWSFLASH - RIGHT (EVENTS) IMAGE */
#newsflash-right-image{
width: 50px;
height: 50px;
float: left;
border-right: 1px double rgb(74,77,144);
background-image: url(NEWSFLASH-RIGHT-IMAGE.png);
}
/* NEWSFLASH - RIGHT (EVENTS) TEXT */
#newsflash-right-text{
width: inherit;
height: inherit;
float: inherit;
font-size: 9px;
}
/* NEWSFLASH - RIGHT - BOX (EVENTS) */
#newsflash-right-box{
width: 357px;
background-color:#FFFFFF;
color: #44478a;
float: inherit;
border: 1px double rgb(74,77,144);
}
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=utf-8" /> <title>Reston.com (2.0)</title> <link href="css.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header"></div> <div id="navi">Navigation</div> <div id="leftbar"> <script src="http://arestravel.com/js/_default/ARESbot.js?bundle=reston&ro=1" type="text/javascript"></script> <div id="leftbox"> <div id="leftbox-title">Sponsored Advertising</div> <script type="text/javascript"><!-- google_ad_client = "pub-8246327012745782"; /* 250x250, created 10/4/08 */ google_ad_slot = "2128673963"; google_ad_width = 250; google_ad_height = 250; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></div> </div> <div id="content"> <div id="news-flash"> <div id="newsflash-left">Newsflash <div id="newsflash-left-box"> <div id="newsflash-left-image"></div> <div id="newsflash-left-text">This will be a description of the latest news article on our website. This will be a description of the latest news article on our website. <br /><strong>More</strong> </div> </div> </div> <div id="newsflash-right">Upcoming Event <div id="newsflash-right-box"> <div id="newsflash-right-image"></div> <div id="newsflash-right-text">This will be a description of the latest upcoming event in Reston Virginia. This will be a description of the latest upcoming event in Reston Virginia. <br /><strong>More</strong></div> </div> </div> <br /> <br /> <strong><h1>Your guide to working, living, and playing in Reston Virginia!</h1></strong> <br /> <br /> <h2>Reston Hotels</h2> - Stay in Reston! The hotels in the Reston area offer a full range of accommodations including luxury hotels and options for those on a budget. Conveniently located right off the Dulles Toll Road, just 15 minutes from Dulles International Airport, Reston is nearby most businesses in the area and within driving distance to Washington D.C. <br /> <br /> <h2>Reston Restaurants</h2> - Dine in Reston! Reston offers some of the best dining alternatives in Northern Virginia. Whether you're planning a romantic dinner, hosting a business gathering, grabbing an afternoon snack, celebrating a special occassion, or having a night out with the family, Reston's restaurants can meet your needs. <br /> <br /> <h2>Reston Town Center</h2> - Reston's famous "downtown" includes many shops and restaurants, ice skating, a multiplex movie theater, and a luxury hotel. Reston Town Center hosts outdoor festivals and concerts throughout the year, and features outdoor ice skating during the winter months. <br /> <br /> <h2>Village Centers</h2> - Explore Reston's village centers! Reston's community village centers each has its own special character and include shops, parks, lakes, walking and bike paths, art galleries, restaurants, museums, theaters, and much more. <br /> <br /> <h2>Reston Real Estate</h2> - Reston is a world renowned planned community and was recently ranked one of the top 100 Best Places to Live in America by Money Magazine. Reston's diverse selection of housing includes condos, apartments, townhomes, and single-family homes. Lakefront properties are also available.</div> </div> </body> </html> I am honestly trying to do this thing with CSS but CSS does not seem rational. I had some nested div elements now I thought that position relative was with respect to the parent. So if I put position: relative; left:100px; top: 8px on the red one it will be close to the top of the parent (the blue one) and 100 px over from the left. Then if I do the green div the same except top: 22px it will be right below the red one. I know divs make a new line but they were skipping a line. So I turned them into spans. now it starts the second one at the right place top to bottom, but left to right it starts where the last one left off. And now here's an even harder question, I guess without using zindex they won't overlay, right? and centering is just out of the question... Code: <div>
<div> </div>
<div> </div>
</div>
Here is some sample actual code: http://www.colleenweb.com/onetix.html It doesnt have all the normal styles but it shows the problem very clearly. If you look at the code it should be pretty clear what I intended. Please tell me why the position specifications are being ignored. And problems are compounded when you try to print it, it makes the graphic background bigger and cuts it off. If you just print the graphic it is fine. I gave up with the transparent for now because this has to work tomorrow, and just made a hard coded blue one but eventually I'd like to address that too. I need to be able to make these look acceptable both for screen and print. I never had these problems when I did everything with tables. This is why people don't learn CSS. Well I'm pretty uneducated in CSS, I have just played around with it hours and hours and always figured out what I was trying to do. But right now I am stumped. Please view the following page in FireFox if you have it: http://www.iqdrop.com/newiq/index.php Then in IE You see the Google ad is dropped way down in IE for some reason and overlaps my menu, and the <DIV> containing the word "index.php" is also taller in IE. I'm not sure what is wrong and I've been trying all sorts of things with no luck. Thanks for any help. I'm getting a headache here. What I'm creating is a very simple web gallery. Yes, wheel being reinvented, please don't tell me I need to use something canned. When an individual image is displayed, the image needs to be centered left-to-right. However, I want to offer a button that shows the EXIF data in a side-pane, and when it appears, the image and EXIF data block need to be centered as an aggregate. The image display and the EXIF retrieval are both done with server-side scripts (the latter being pulled via AJAX so that it does not need to be extracted if it isn't requested by the user). Now, here's the deal: I have this working perfectly using a table-based layout, but all my attempts to get it done using DIVs behave badly. I either get an image div that doesn't move when I activate the EXIF div, or the EXIF div ends up UNDER the image div. It should be really simple... I'm just too stupid to figure it out. CSS always kicks my butt. I am currently having to deal with a mystery padding at the bottom of each of my im_container tags... everything is set to 0px, and oddly enough... it looks GREAT in IE (ugghh... i can't believe i just said that)... it doesnt however look good in firefox... whats up... here is the XHTML followed by the CSS.. Code: <div class="im_left"> <div class="im_container"> <div class="im_logo"><img src="/images/im_icq.gif" alt="Contact Via ICQ" /></div> <div class="im_info"> 164149536 </div> <div class="clear"></div> </div> <div class="im_container"> <div class="im_logo"><img src="/images/im_aim.gif" alt="Contact Via AIM" /></div> <div class="im_info"> Incomplete Gamer </div> <div class="clear"></div> </div> </div> Code: .im_left {float:left; width:270px;}
.im_container {
margin:0 0 0 30px !important;
border:1px solid #900;
}
.im_container a:link,
.im_container a:visited,
.im_container a:active,
.im_container a:hover {color:#FFF;}
.im_logo {
margin:0px 0 0 0;
float:left;
width:30px; margin:0px; padding:0px;
}
.im_logo img {border:0px; margin:0px; padding:0px;}
.im_info {
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin:0 0 0 5px;
text-align:justify;
width:200px;
float:left;
}
.im_title {
text-align:center;
font-weight:bold;
}
So this site is having a bit of trouble in WinIE 6.0. If you resize the window after you load the page, the dark brown area behind the content sort of gets stuck on the right. I'm wondering if it might have something to do with the javascript I had to do to get IE to recognize fixed backgrounds. Any ideas? Site: http://dev.sabotagemedia.com/firstclass/ CSS: http://dev.sabotagemedia.com/firstclass/_css/style.css I'm pretty new to CSS (only just begun). I've been teaching myself using a number of resources, but I realise the best way to learn is to practice. I just don't think I'm doing it right. I want to have the main content of the page floating in the centre of the window, which works in IE but not firefox or opera. I also want san serif fonts, but these also aren't being displayed in Opera or Firefox. Any ideas? Here's the code: Code: /*** TEXT AND TAG STYLES ***/
body {
font:Geneva, Arial, Helvetica, san-serif;
color:#000000;
text-align:center;
background-color:#003366;}
h1 {
font:Geneva, Arial, Helvetica, san-serif;
color:#336699;
text-decoration:underline;}
h2 {
font:Verdana, Arial, Helvetica, sans-serif;
color:#336699;
text-decoration:none;}
h3 {
font:Verdana, Arial, Helvetica, sans-serif;
text-decoration:none;}
a {
color:#3366CC;
text-decoration:none;}
a:link {
color:#3366CC;
text-decoration:none;}
a:hover {
color:#336699;
text-decoration:underline;}
ul {
list-style-image:url(../images/bullets/bullet1.gif);}
ul ul {
list-style-image:url(../images/bullets/bullet2.gif);}
em {
color:#336699;
text-decoration:none;
}
/*** PAGE DIVISIONS ***/
#container {
width:772px;
height:600px;
top:7px;
text-align:left;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
background-color:#FFFFFF;
padding: 10px 10px 10px 10px;}
#masthead {
height:100px;
width: auto;}
#navbar {
position:relative;
top:2px;
width:auto;
height:15px;
padding: 3px 6px 3px 6px;
border-top: 2px solid #000033;
border-bottom: 2px solid #000033;
background-color:#336699;
color: #FFFFFF;}
#content {
position: relative;
top: 2px;
border-color:#336699;
border-style:groove;
border-width:1px;
width: auto;
height: 438px;
padding: 10px 7px 10px 12px;}
.piece {
position:relative;
float:left;
width: 522px;
height: 422px;
z-index: 1;
padding: 12px 6px 3px 12px;
border: 1px solid #000000}
.rightspace {
position:relative;
top: 0px;
float:right;
width:190px;
height:422px;
z-index: 2;
background-color:#CCCCCC;
padding:12px 6px 3px 8px;}
#bottombar {
height: 12px;
margin-top: 12px;
top: 12px;
border-top: 1px solid #333399;
background-color:#00FF33;}
also, i don't think i'm using classes properly, but I think I just realised that. midgetporn 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? omg I am going to fall from the window with this stupid language lol... Until yesterday, I was designing properly my site, using css and linking it in my php properly andddddddd.......... today I noticed a weird result. When I change something in css, I can see no result in the site. Even if I delete code from css, the site seems to be cached! I use Mozilla, I tried to clean cache, the css is properly linked... whats going on now Have anyone else faced a similar problem?... Hey everyone, I have an odd problem. CSS Code: Original - CSS Code ul#admin_menu li.am_item{ float:left; clear:none; display:inline; border:0; padding:0; margin:0; width:24%; }
ul#admin_menu li.am_item{
This works... CSS Code: Original - CSS Code li.am_item{ float:left; clear:none; display:inline; border:0; padding:0; margin:0; width:24%; }
li.am_item{
This doesn't work... I don't understand why. What gave it away was the display:inline; The first one displays them inline, the second displays them block and they don't get their width. I have a basic 2 column layout with a header and the columns reprezented by two floated divs but on IE I'm experiencing some weird behaviour with the menu. To be precise the menu's background and content is not showing up at pageload and I have to hover some of it's elements or resize the window, or bring another window above IE's window and then the hidden elements magically appear. Is this some common bug? And more important: is there a fix? You can see my example at the following link -> http://www.link7.ro/misc/css-stuff/bug1/test.html Thanks in advance. Hey gang, quick question. I'm tring to make a "Thermometer" of sorts for my site, and instead of making lots of images in photoshop, I figured I could do it a little more dynamicly using divs and css. I was right, as Firefox displays my code perfectly, however, IE messes up the whole thing by keeping the allocated space for the one div in the place where its positioned in the code. Dumb thing. I figure it has something to do with the display property, but I'm not sure which to use. Any suggestions? Thanks! PHP Code: <div style="height: 500px; width: 100px; padding: 0px; margin: 0px; border: 0px black solid; background: url('meter_color.jpg');"> <div style="position: relative; top: 0px; left: 0px; height: 125px; width: 100px; padding: 0px; margin: 0px; background: #FFFFFF; z-index: 1;"></div> <div style="position: relative; top: -125px; left: 0px; height: 500px; width: 100px; padding: 0px; margin: 0px; background: url('mask.gif'); z-index: 2;"></div> </div> (images attached) -Jim So I have the following website: http://www.itmustbecollege.com/ and it has a problem SOMEWHERE that I can't seem to figure out. The problem is that all of my pages now have a big "space" on the far right, forcing a huge horizontal size. I have tried to debug but can't seem to find out the exact problem. It is weird, because certain parts of the website have a "width: 100%" yet ENDS at the correct look, yet there is still that huge space! Hello, I have a free text search with auto suggestion that opens below the input box. I finally managed to make it look good in all browsers, but I have one problem left in IE - when the auto suggestion div opens with the options and I press the down arrow to move down the list, there is a little jump. You can see it by going to : bateries.websitebuildingsolutions.com in IE and enter "b1" in the search box, wait a second for the div to open and than press the down arrow to move down the list. What can I do to fix this? Thanks |
|||||||