|
CSS - Noob Problems...
Hi, i'm new to CSS, started yesterday! And have overcame some problems, but have got some problems i cannot solve..
I know that there are several errors in the code below, like doc type but i dont think that is the problem. Basically i am trying to make the main container centre in the middle of the page at 80% width, then i want the container to have a minimum width of 400px. This works perfectly in Firefox, but neither seem to work in Internet Explorer 7. Any help guys? Code: <html>
<head>
<style type="text/css">
div.container
{
position: absolute;
width:80%;
min-width:400px;
margin:0 auto;
top:0;
bottom:0;
left:0;
right:0;
border:1px solid gray;
line-height:150%;
}
div.header
{
padding:0em;
color:white;
background-image:url(bg.jpg);
background-repeat:repeat-x;
clear:both;
}
div.left
{
float:left;
width:100px;
margin:0;
overflow:auto;
}
div.right
{
float:right;
width:100px;
margin:0;
overflow: auto;
}
div.content
{
margin-right:100px;
margin-left: 100px;
border-right:1px solid gray;
border-left:1px solid gray;
padding:1em;
}
div.footer
{
color:white;
background-image:url(bg.jpg);
background-repeat:repeat-x;
text-align:center;
clear:both;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="12%"><img src="bg.png" width="90" height="90"></td>
<td width="88%" align="right" valign="bottom"><img src="title.png" align="right"></td>
</tr>
</table>
</div>
<div class="left"> Menu</div>
<div class="right">
hello
</div>
<div class="content">
<h2>heading 2</h2>
<p>the paragrapth under heading 2</p>
</div>
<div class="footer">Copyright footer</div>
</div>
</body>
</html>
Similar TutorialsHey all. I'm just starting out in web design. To make things even more complicated, I'm using CSS for my first ever website. So I'm building this website from scratch, using online tutorials and such. But I'm running into a problem. On a PC, everything displays perfectly in IE and Firefox. But on a Mac, the nav bar is stretched with dead space after the last list item. This is the same in Safari, Firefox, and IE for Mac. Would you guys give it a look and maybe help me around the issue? What I'd like is no dead space after the last list item on any computer, (if you're looking on a PC, it appears correct) and I want a fixed width. Site CSS Thanks. Hello i am new.. I basically need help with a css pop up.. i dont know nothing about coding.. I just used the method on my myspace profile. Its just a simple.. thumbnail display a large image when mouseover. It all works fine but FF and IE both put a border around the thumbnail and large images. I think its maninly because my method is also linking th ethumbnail back to my page.. i want to get rid of that too but don't know how. Anyway this is what i have.. Code:
a.class1:link,
a.class1:visited,
a.class1:active{color:FFFFFF;
font-family:georgia, verdana, tahoma, sans-serif;
font-size:0px;
text-decoration:none;}
a.class1 span{display:none;}
a.class1:hover span {display: block;
position: absolute;
top: 120px;
left:0;
z-index: 5;
filter:none;
color:FFFFFF;
background-color:transparent;
filter:none;
font-size: 0px;
font-family:georgia, verdana, tahoma, sans-serif;
text-align: center;
text-decoration:none;}
and the in the div contents obviously this.. Code: <a href="url-2-my-profile"class="class1"><img src="thumbnail-url"/><span><img src="large-image-url"/></span></a> I know i don't need all that font stuff since i have removed this and that and it still works.. but i just want to know how to remove the borders.. even if i remove the colour codes it will still default a colour border. So i just want simply image pop up without borders and without needing to link the thumbnail to a url. Thanks Hi folks. I need some help with css. I have a wordpress template that has a thumbnail populated on a home page. The problem is that it looks like this: URL http://i55.tinypic.com/aoulhf.png and what I would like it to look like is this : URL http://i55.tinypic.com/2wd22r8.png And the code of the page is he Code:
<strong><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></strong><br>
<?php get_the_image( array( 'image_scan' => true,'width' => '75', 'height' => '75' ) ); ?><?php the_content_limit(80, ""); ?>
I know I should use DIV tags and css but I don't know how. Please ,anybody help. Thanks Hi all probably a stupid question but i cant find the answer i am making a site and when i zoom out in the browser the page sits to the left, how do i make it stay in the center Cheers Hello, I'm a self taught web designer, i've not really got much experience of CSS and i'm having a few issues with some alignment. I'm in the process of developing a site for my cousin, what i'm trying to achieve is the left menu to be at the top of the page, and the text to be in the center of the screen, as i'm new here i'm not able to post a link to my site, so have posted the CSS below. Playing with css and looking at Google I've padded the text so its where i want it, but i can't get the menu to come up from below the text. Any help / links in the right direction would be really appreciated. Code for the text: Code: p.mainbody
{
z-index: 1000;
vertical-align:top;
padding-left: 200px;
padding-right: 250px;
text-align:left;
code for the menu: Code: /* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
{
vertical-align:top;
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 10em;
/*height:10em;*/
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{ z-index: 1000; }
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 10em;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
{
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 8.2em;
left: -1000em;
top: 0;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible { left: 0; }
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li { width: 8.sem; }
/******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************/
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical { border: 1px solid #CCC; }
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul { border: 1px solid #CCC; }
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
{
display: block;
cursor: pointer;
background-color: #EEE;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
background-color: #33C;
color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
background-color: #33C;
color: #FFF;
}
/******************************************************************************* SUBMENU INDICATION: styles if there is a submenu under a given menu item *******************************************************************************/
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/******************************************************************************* BROWSER HACKS: the hacks below should not be changed unless you are an expert *******************************************************************************/
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarVertical li.MenuBarItemIE
{
display: inline;
float: left;
background: #FFF;
}
}
Many Thanks I have a footer image on a site and I want to line up some of the text on the left and some of the text on the right. The relevant css footer code is this: Code: #footer {
clear:both;
background:url(images/footer.jpg);
width:780px;
height:71px;
color:#ffffff;
font-size:xx-small;
}
#footer .notover {padding-top:54px;}
The xhtml is this: Code: <div id="footer"> <div class="notover">All this stuff is left aligned 54px from the top of the image.</div> </div> Now, how do I add some text on the same line as the class="notover" text that is right aligned? I thought it would be as simple as creating another div that specified text-align:right; but the text shows up right aligned and way below the footer image. Thanks in advance. Ok, so I've done the w3schools.com tutorial on CSS and I still have some basic syntax questions. In my wordpress style.css I see the following entry: #featured-top .featuredpost img { background: #FFFFFF; margin: 0 0 5px 0; padding: 4px; border: 1px solid #DDDDDD; } Does this mean that these rules apply only to elements in this specific order? Like, in English, "rule applies to an img, that has a parent in the class featuredpost, that has a parent with id = featured-top"? If so, does the featuredpost class have to be defined previously or is this considered the definition? Second question, in the HTML I see this syntax: <div id="wpsb" class="widget wpsb_opt_in"> I didn't think you could have spaces in a class name. Or does this mean that wpsb is in 2 classes? When I search style.css I don't see the "wbsb_opt_in" class anywhere. Thanks Basic positioning problem... Suppose I want to stack two (or more) elements on top of eachother, sort of a column. I want a masthead (images), and boxes of text below it. So I tried this: Quote: <html> <head> <title>No Jail Test Page</title> <style type="text/css" media="screen"> div.box_one { width: 100%; background: url(./Image_Back.gif); } div.image_left { float: left; } div.image_right { float: right; } div.box_two { background-color: #F4F4F4; width: 100%; border: 2px solid #006633; border-collapse: collapse; padding: 10px 10px 10px 10px; } </style> </head> <body> <div class="box_one"> <div class="image_left"><img src="images1.gif"></div> <div class="image_right"><img src="images2.gif"></div> </div> <div class="box_two"> Some Text Some Text </div> </body> </html> But the images end up over the text, so obviously I don't understand the positioning. SEE ATTACHED IMAGE Can someone point out my positioning problem here and recomend a tutorial? [EDIT] This actually looks almost perfict in IE, it's in FF that things "stack up" on eachother... Hi .. I have decided to teach myself Web Development .. and I have jumped into HTML and CSS first .. and will be branching off to PHP once I have a solid HTML and CSS foundation .. To teach myself practically .. I have decided to make a webpage that does nothing but have a blank coloured background and an area to write text that is surrounded by a rounded rectangle constructed of gifs .. I know this may not be the most efficient way to do this, but I am using this as an exercise to gain a greater holistic understanding of the way CSS works with HTML. The desired outcome is to have a rounded rectangle box that will be drawn to fit its container, so that it can be reused all over the place ... The code is pasted below, and any images can be substituted for the ones in my code .. but my question is .. : in the attached code, why is the final element not lined up horizontally with the other 2 elements ?? <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "(*********)"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <link href="styles.css" rel="stylesheet" type="text/css"> <title>Insert title here</title> </head> <body> <div id="body"> <div id="container"> <div id="box_top_left"> </div> <div id="box_top"> </div> <div id="box_top_right"> </div> </div> </div> </body> </html> CSS Code div#container{ width: 500px; height : 500px; position:absolute; background:#7868723; } div#box_top_left{ width: 10px; height: 10px; display: block; float:left; background-repeat: no-repeat; background-image: ******* } div#box_top_right{ width: 16px; height: 10px; float: right; position: relative; display: block; top: 0px; background-repeat: no-repeat; background-image: ******** } div#box_top{ width: 100% - 26px; height: 10px; display:block; position:relative; left : -5px; margin:0; background-repeat: repeat-x; background-image: ******* } Thanks for any assistance you can give ... I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container. Anyone know why there is a shift, and what I can do about it? Style sheet code pasted below: Code: body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3;
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}
h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}
h2 {
font-size:2em;
}
h3 {
font-size:1.5em;
}
h4 {
font-size:1.25em;
}
a:link {
color:#8090AC;
text-decoration:none;
}
a:visited {
color:#B17F6C;
text-decoration:none;
}
a:hover {
color:#E9DF55;
text-decoration:underline;
}
a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}
#header {
height:200px;
width:760px;
margin:0;
padding:0;
}
#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
font-size: 12pt;
color: #e9df55;
background-color:transparent;
text-indent: 200pt;
vertical-align: text-bottom;
}
navigate{
color : #105BAC;
background-color : transparent;
height : 20px;
font-size: 100%;
border-top : 1px solid #999999;
}
#navigate ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 150px;
margin-right: 0px;
padding: 2px 0 0 0;
}
#navigate ul li {
display: inline;
}
td {
font-family: Arial, Helvetica, sans-serif;
}
th {
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size: 14px;
color: #FFFFFF;
left: 50px;
right: 50px;
}
#main {
width: 660px;
padding-right: 50px;
padding-left: 50px;
}
#footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #666666;
height: 100px;
width: 760px;
vertical-align: text-bottom;
text-align: center;
}
#SplashImage {
float: left;
}
.image-left {
clear: none;
margin-bottom: 10px;
float: left;
margin-right: 20px;
margin-left: 10px;
}
.image-right {
clear: none;
margin-bottom: 10px;
margin-left: 10px;
float: right;
}
I am pretty new to semantic HTML and just started. I used to put a lot of stuff in the html instead of the css. I have now made a semantic html website which works perfectly in IE, but not in the other browsers I've tried (FF, NN, Opera). I figure the problems must be in the css, so could you please take a look at it? In the beginning I have a DIV with a background-image, which is the banner of the page. After 160px, a horizontal menu comes on top of that and a little below there will be breadcrums. For now there 2 things to solve: 1. IE places the background/image at the top of where the DIV starts, All the other browsers place the background/image at the first actual content of the page (which is the horizontal menu). If I add a <br> or a dot at the top of the div, the background-images is moved to the right place. But I would like to do it without a <br> or a dot. Is that possible?? 2. The horizontal menu is a series of SPAN's with text in it, the width is set as 19%, and in IE this works. In the other browsers each SPAN is as wide as the text is, though it should be longer. Could you help me find the solution to these problems? The code is posted below, Sjoukje My CSS: Code:
BODY {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 0; height: 100%;}
#bgimage {
background-image: url(images/CFD.jpg);
width: 800px;
height: 280px;
margin-top: 20px}
#midimage {
background-image: url(images/contentbg.jpg);
width: 800px;
height: 110%;
background-repeat: repeat-y;
overflow: hidden;}
#underimage {
background-image: url(images/contentbottom.jpg);
width: 800px;
background-repeat: no-repeat;}
#margin_top {
margin-top: 180px;}
#hoofdmenu {
width: 100%;}
.menu_item1, .menu_item2, .menu_item3, .menu_item4, .menu_item5 {
font-size: 10pt;
font-weight: bold;
width: 19%;
height: 15px;
text-align: center;
vertical-align: middle;
padding: 1px;
color: black;
text-decoration: none;}
.menu_item1 {background-color: #3CBF02; }
.menu_item2 {background-color: #0059D3; }
.menu_item3 {background-color: #FFF10C; }
.menu_item4 {background-color: #ff6c00; }
.menu_item5 {background-color: #CB0000; }
.mouseover1, .mouseover2, .mouseover3, .mouseover4, .mouseover5
{ font-size: 10pt;
font-weight: bold;
width: 19%;
height: 15px;
text-align: center;
vertical-align: middle;
padding: 1px;
color: black;
text-decoration: none;}
.mouseover1 { background-color: #45de01;}
.mouseover2 { background-color: #006cff;}
.mouseover3 { background-color: #fff998;}
.mouseover4 { background-color: #ff8400;}
.mouseover5 { background-color: #eb0101;}
a.menu {
color: black;
text-decoration: none;}
#breadcrums {
float: left;
margin-top: 35px;
margin-right: 10px;
margin-left: 200px;
font-size: 7pt;
font-weight: bold;
text-decoration: underline;
text-align: left;
color: Gray;}
p {font-size: 10pt; }
#boxes { float: left;
width:200px;
text-align:left;
padding: 23;
margin-top: -23px;}
.box110, .sub_cfd, .sub_act, .sub_art, .sub_4, .sub_cont {
background-repeat: no-repeat;
padding: 6px;
text-align: left;
font-size: 8pt;}
.box110 { background-image: url(images/menulinks110.jpg); height: 120px;}
.sub_cfd {background-image: url(images/sub_cfd.jpg);
height: 156px;}
.sub_act {background-image: url(images/sub_act.jpg);
height: 156px;}
.sub_art {background-image: url(images/sub_art.jpg); height:
156px;}
.sub_4 {background-image: url(images/sub_4.jpg); height:
156px;}
.sub_cont {background-image: url(images/sub_cont.jpg);
height: 156px;}
p.box_main_text {
font-size: 8pt;
padding: 4px;
margin-top: -10px;}
.box_top_black, .box_top_white {
font-size: 8pt;
font-weight: bold;
text-align: left;
margin-left: 5px;
margin-top: 8px;}
.box_top_black { color: black;}
.box_top_white {color: white;}
#spacer {height: 140px;}
ul.box_list {margin-left:6px; list-style-type: none;}
#content {float: right;
margin-right: 20px;
margin-top: -4px;
width: 570px;
font-size: 10pt;
text-align: left;
vertical-align: top; }
#footer {
margin-left: 210px;
text-align: center;
font-size: 8pt;
color: Gray;
height: 30px;}
p.agenda_top {
font-size: 14pt;
color: black;
text-align: left;
vertical-align: top;}
p.agenda {
font-size: 7pt;
text-align: left;
color: navy;}
ul.agenda_list {
list-style-type: none;
margin-left: 0px;}
td{
width: 13%;
height: 50px;
vertical-align: top;
background-color: white;
padding: 5px;}
The html Code: <HTML> <HEAD> <LINK rel="stylesheet" href="../simpel.css" type="text/css"> </HEAD> <BODY> <DIV align="center"> <DIV id="bgimage"> <DIV id="margin_top"> <SPAN class="menu_item1" onmouseover="this.className='mouseover1'" onmouseout="this.className='menu_item1'"> <A href="../cfd/cfd.html" class="menu">CFD</A></SPAN> <SPAN class="menu_item2" onmouseover="this.className='mouseover2'" onmouseout="this.className='menu_item2'"> <A href="../activiteiten/agenda.html" class="menu">Activiteiten</A></SPAN> <SPAN class="menu_item3" onmouseover="this.className='mouseover3'" onmouseout="this.className='menu_item3'"> <A href="../artikelen/index.html" class="menu">Artikelen</A></SPAN> <SPAN class="menu_item4" onmouseover="this.className='mouseover4'" onmouseout="this.className='menu_item4'"> <A href="" class="menu">nogiets</A></SPAN> <SPAN class="menu_item5" onmouseover="this.className='mouseover5'" onmouseout="this.className='menu_item5'"> <A href="../contact/contact.html" class="menu">Contact</A></SPAN> <DIV ID="breadcrums">><A href="../index.html">Home</A></DIV> </DIV> </DIV> <DIV id="midimage"> <DIV id="boxes" > <DIV align="center" class="sub_cfd"> <DIV><P class="box_top_white">Activiteiten:</P></DIV> <DIV> <UL class="box_list"> <LI>-CFD?!</LI> <LI>-Visie</LI> <LI>-Geloofsgetuigenis</LI> <LI>-3 Rotsen</LI> </UL> </DIV> </DIV> <DIV id="spacer"></DIV> <DIV align="center" class="box110"> <DIV><P class="box_top_white">Meer CFD</P></DIV> <DIV> <UL class="box_list"> <LI>-Webwinkel</LI> <LI>-HisBride Ministries</LI> <LI>-Forum</LI> <LI>-Creative Expressions</LI> </UL> </DIV> </DIV> </DIV> <DIV id="content"> <H2>Content</H2> <P>Content (removed for now)</p> </DIV> </DIV> <DIV id="underimage"></DIV> <DIV id="footer">© Christian Fellowship Drachten</DIV> </DIV> </BODY> </HTML> I'm trying to build a menu with CSS and have some problems I can't figure out. Here's what I got so far: testsite So I need some kind of workaround for InternetExplorer cause it doesn't display the fonts correctly, what do I need to change to get that right? And is there a way to automatically adjust the width of the submenu fields according to the length of the text that's written within? Here's the stylesheet: Code:
menutext { font-family:sans-serif; font-size:25px; }
subtext { font-family:sans-serif; font-size:10px; color:#707070;}
subtext2 { font-family:sans-serif; font-size:12px; color:#707070;}
subtext2:hover { color:white;}
ul{
list-style-type:none;
padding:0px;
position:relative;
}
a{
float:left;
width:137px;
text-decoration:none;
color:#27251c;
font-weight:bold;
background:#e0e0e0;
padding:5px;
border-right:1px solid #FFFFFF;
}
li { display: inline;}
a:hover { background:#27251c; color:white; }
#navi {
width:888px;
position:absolute;
margin-left:-444px;
margin-top:-13px;
left:50%;
}
#navi #aktuell a{ background:#27251c; color:white; }
And here's the html: Code: <html> <head> <title>the artist crew</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <center> <img src="images/banner.png"> </center> <div id="navi"> <ul> <li><a href="index.html"> <menutext>home</menutext> </br> <subtext>news & announcements</subtext> </a></li> <li><a href="projects.html"> <menutext>habitat</menutext> </br> <subtext>who we are, what we do</subtext> </a></li> <li id="aktuell"><a href="flow.html"> <menutext>flow</menutext> </br> <subtext>exhibitions & other works</subtext> </a></li> <li><a href="nexus.html"> <menutext>nexus</menutext> </br> <subtext>downloads & free stuff</subtext> </a></li> <li><a href="swarm.html"> <menutext>swarm</menutext> </br> <subtext>friends & affiliates</subtext> </a></li> <li><a href="hive.html"> <menutext>hive</menutext> </br> <subtext>where to get our stuff</subtext> </a></li> </ul> <ul style="top:2px;"> <li><a href="projects.html" style="width:48px;"> <subtext2>projects</subtext2> </a></li> <li><a href="conceptart.html" style="width:67px;"> <subtext2>concept art</subtext2> </a></li> <li id="aktuell"><a href="urbanart.html" style="width:53px;"> <subtext2>urban art</subtext2> </a></li> <li><a href="paintdraw.html" style="width:120px;"> <subtext2>paintings & drawings</subtext2> </a></li> <li><a href="sketches.html" style="width:53px;"> <subtext2>sketches</subtext2> </a></li> </ul> </div> </body> </html> Thanks in advance! Okay, so I'm making a site and I want 3 divs on the same line. This is what I have in the .CSS: Code: #tm{
background: #000000 url(tmcont.gif) repeat-x;
width: 700px;
height: 30px;
text-align: center;
}
#tmleft{
background: url(tmleft.gif) no-repeat;
width: 4px;
height: 30px;
}
#tmright{
background: url(tmright.gif) no-repeat;
width: 4px;
height: 30px;
}
And in the HTML document: Code: <body> <div id="tmleft"></div><div id="tm"></div><div id="tmright"></div> </body> Site is here In IE, the hr that contains the red line (bottom element) is a couple pixels below the above div. In Mozilla, it isn't. I had thought that divs have a break before and after them and I guess that could be why IE is displaying it like this. Does anyone know how I can get the browsers to match? Because if they are the same, I could do a negative top margin. thanks I am attempting to make a joomla theme and I am having some problems with my css working in ie, yet it works in the other major browsers. the problems I am having is the h3 background image isn't displaying and a gap at the bottom of the page. http://settoloki.homeip.net:40080/badt/ view the site here and my css Code:
@charset "utf-8";
/* CSS Document */
body, html{
background:url(../images/back-grad.png) repeat-x #295171;
margin:0px;
padding:0px;
}
/*****************************************/
/*** Layout elements ***/
/*****************************************/
#content-wrap{
background:url(../images/background.png) no-repeat top left #99CCCC;
width:960px;
border-left:1px solid white;
border-right:1px solid white;
text-align:left;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
}
#content-head{
width:100%;
height:230px;
background:url(../images/header.png) no-repeat top left;
padding-top:20px;
}
#main-content{
width:900px;
border-collapse:collapse;
}
#main-content-top{
width:900px;
height:13px;
background:url(../images/main-content-top.png) no-repeat;
}
#main-content-mid{
position:relative;
background:url(../images/main-content-mid.png) repeat-y;
width:100%;
height:100%;
text-align:left;
}
#content-breadcrumbs{
border-bottom:1px solid #FFFFFF;
width:850px;
margin-bottom:40px;
margin-left:10px;
height:15px;
line-height:10px;
color:#FFF;
font-size:10px;
}
#content-left-side{
width:180px;
height:100%;
float:left;
padding-left:20px;
}
#content-main{
width:640px;
height:100%;
float:left;
}
#content-right-side{
width:200px;
float:right;
padding-right:20px;
}
#main-content-bottom{
background:url(../images/main-content-bottom.png) no-repeat;
width:900px;
height:21px;
}
#main-content-footer{
background:url(../images/footer.png) no-repeat;
width:100%;
height:201px;
}
/*****************************************/
/*** Page elements ***/
/*****************************************/
/*****************************************/
/*** Joomla! specific content elements ***/
/*****************************************/
div.offline {
background: #fffebb;
width: 100%;
position: absolute;
top: 0;
left: 0;
font-size: 1.2em;
padding: 5px;
}
/* headers */
div.componentheading {
margin:0;
color: #000;
background:url(../images/content-header.png) no-repeat;
height:37px;
width:640px;
line-height:37px;
font-weight:bold;
padding-left:15px;
margin-left:-4px;
}
table.blog {
background:url(../images/content.png) repeat-y;
margin-left:-4px;
}
h1 {
padding: 0;
font-family: Tahoma, Arial, sans-serif;
font-size: 1.3em;
line-height:19px;
font-weight: 700;
vertical-align: bottom;
color: #000;
text-align: left;
width: 100%;
}
h2, .contentheading {
padding: 0;
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 11px;
vertical-align: middle;
color: #295171;
text-align: left;
font-weight: 700;
}
h2, a.contentheading {
background: none;
border: none;
margin:6px 0;
}
h4 {
font-family: Tahoma, Arial, sans-serif;
color: #333;
}
h3{
width:180px;
height:37px;
line-height:39px;
color:white;
font-weight:bold;
background:url(../images/h3.png)no-repeat;
font-size:12px;
padding-left:15px;
padding-bottom:0px;
margin-bottom:0px;
}
div.moduletable_menu ul{
list-style:none;
padding:0px;
margin:0px;
}
div.moduletable_menu ul li{
background:url(../images/menu-link.png) no-repeat;
height:30px;
width:180px;
line-height:28px;
padding-left:22px;
}
div.moduletable_menu ul li a{
color:#FFF;
text-decoration:none;
font-size:10px;
font-weight:bold;
}
thanks in advance for any help. I am using dreamweaver to put a spry menu bar into a page. Until recently, the page was fine on both firefox and IE, but now, when you access the sub menu, under shop, while firefox displays the second menu in the correct place, the menu in IE displays from the top of the page, not under the original menu. The CSS code for the nav bar.. The website is http://www.skiweb.uk.com Sorry if this is a messy post, its my first!! Many thanks. Code: @charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/*******************************************************************************
LAYOUT INFORMATION: describes box model, positioning, z-order
*******************************************************************************/
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
float: left;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 22.2em;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}
/*******************************************************************************
DESIGN INFORMATION: describes color scheme, borders, fonts
*******************************************************************************/
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border: 1px solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #EEE;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #33C;
color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #33C;
color: #FFF;
}
/*******************************************************************************
SUBMENU INDICATION: styles if there is a submenu under a given menu item
*******************************************************************************/
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/*******************************************************************************
BROWSER HACKS: the hacks below should not be changed unless you are an expert
*******************************************************************************/
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #FFF;
}
}
Hey all, I have a small problem. In my webpage stylesheet I have set the <input> tag as having a solid border of 1 in black. Now when I do text boxes this is fine. But when i do checkboxes it looks stupid so how do it so that on some input tags it works and other input tags it doesn't. Thanks in advance. I'm working on an application using asp with vbscript/javascript. The CSS for a certain page is written and applied using javascript document.writeln. The variable with the css is just a javascript string variable that includes the style tags and the css. (This is just a bit of the code I'm working with. There is too much to post.) This works fine in IE/Firefox, but I'm having problems in Safari/Chrome. It's not registering the a.weekday:link in specific. It's using the default a:-webkit-any-link in Chrome. Other places are using a css page to apply the a:link styles and it works fine. Any ideas what the problem is? I've done some searching on the internet and could not come up with anything. Any help/suggestions would be appreciated. http://tinyurl.com/5wgx4s The first problem is that in IE the header menu does not go straight across, instead it does down the page like stairs. How do I fix this? Secondly, on the products page, why are the bullet points behind the text? Thanks Here is the site http://www dot asylumaccess dot org slash joom I know! I know! I should have been developing my site in multiple browsers simultaneously! But I put together a beautiful site in FF3 and then took a gander in IE6 and HOLY ****! It is just complete crap! I want to wrap my hands around the neck of Internet Explorer and choke it to death. No doubt this is not an uncommon feeling. Please help me put my mind to rest about this mess. My specific problem: Despite having set width and height values in both the CSS and tables, IE6 is increasing the height the two cells in the right column and completely screwing my layout. I have no idea what I can do to fix this besides setting the width and height values! I have to use tables for reasons that are too long to get into right now. What can I do to get the heights of these cells to set properly? CSS (html follows) : Code: /* CSS Document */
.upper-nav li {
display: inline; /* Shows each item side-by-side */
list-style-type: none; /* Gets rid of the bullet points */
}
.upper-nav li a {
color:#fff;
/*font-size:1em;*/
display: block;
float: left;
padding: 0 .25em; /* Provides horizontal separation between menu items */
font-weight:bolder;
font-size:12px;
}
.upper-nav ul {
margin-left:-30px;
}
li {
list-style-type:none;
}
.donate {
border: none;
background-color:#fff;
/*width:370px;
height:102px;*/
text-align:right;
}
.container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
/*height:auto; !important; real browsers */
/*height:100%; IE6: treaded as min-height*/
/*min-height:100%; real browsers */
background-color:#fff;
width:780px;
}
.upper-nav {
width:370px;
height:40px;
background-color:#B3BB1C;
}
.main-content {
width:350px;
background-color:#fff;
padding: 10px;
font-family:"Times New Roman", Times, serif;
height:100%;
}
.mini-col {
width:185px;
height:235px;
background-image:url(../images/mini-col-bg.gif);
background-repeat:no-repeat;
/*background-color:#ccc;
padding-left:10px;*/
padding:0 5px;
font-family:"Times New Roman", Times, serif;
}
#mini-col table {
margin-top:-10px;
}
.mini-col p {
margin-top:-10px;
}
div#side-nav {
position:absolute;
left:0px;
top:400px;
width:195px;
background-color:#FFF;
padding-left:5px;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers overflow:auto;*/
}
#side-nav h3 {
color:#0270af;
font-size:1em;
padding-left:5px;
}
#side-nav fieldset {
border:none;
}
#donate input {
padding: 20px 10px;
}
#col1 {
float:left;
width:195px;
background:#fff;
padding: 10px;
clear:left;
}
#col2 {
float:left;
width:350px;
background:#fff;
padding: 10px;
}
.moduletable_menu, .moduletable
{
color: #000;
}
.moduletable_menu h3 {
border-bottom: 1px solid #FFFFFF;
margin-bottom: 0px;
color:#0270af;
font-size:1em;
padding:5px;
}
.moduletable_menu ul {
margin-left: 20px;
margin-top: 10px;
padding: 5px;
font-size: .9em;
line-height:1.5em;
}
.moduletable div {
padding-left:10px;
font-size:8px;
}
.contentheading {
color: #F47F20;
font-size:1em;
font-weight:bold;
}
.contentpaneopen h1 {
font-size:1.2em;
border-bottom: 1px solid #244223;
/*padding: 10px;*/
}
.contentpaneopen td {
padding:0;
}
.gutter {padding:8px;}
a:link {
color: #0270af;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #0270af;
}
a:hover {
text-decoration: underline;
color: #B3BB1C;
}
a:active {
text-decoration: none;
color: #0270af;
}
img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
margin:0;
padding:0;
height:100%;
background: #000;
background-image:url(../images/bkgd.jpg);
line-height:1.1em;
}
.article_column {
color:#666;
}
.container-table {
background-color:#FFF;
margin:auto;
}
.logo{
background-image:url(../images/logo-face.jpg); /*needed for container min-height */
background-repeat:no-repeat;
border:none;
}
.mainlevel-nav {
margin-top:-10px;
}
HTML: Code: <table cellpadding="0" cellspacing="0" class="container-table">
<tr>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td height="400" width="400" colspan="2" rowspan="3" class="logo"> </td>
<td width="390" height="100" class="donate"><jdoc:include type="modules" name="advert1" /></td>
</tr>
<tr>
<td height="40" class="upper-nav" valign="middle" width="370"><jdoc:include type="modules" name="user3" /></td>
</tr>
<tr>
<td rowspan="2" class="main-content" valign="top"><jdoc:include type="component" /></td>
</tr>
<tr>
<td valign="top"><jdoc:include type="modules" name="left" style="xhtml" /></td>
<td class="mini-col" valign="top"><jdoc:include type="modules" name="newsflash" /> </td>
</tr>
</table>
</td>
</tr>
</table>
|
|||||||