|
CSS - Buttons, Background Wont Work
Similar TutorialsHi all, I am trying to do something that I think is trivial, but just cannot seem to get this to work in IE! I am trying to draw an IFRAME that contains a gray background that contains a document that has a white background. The result is supposed to make the scrolling document in the IFRAME look like a white piece of paper with a gray border of 8 pixels. This works perfectly in Safari and Firefox, but no matter what I try, I cannot figure out how to get this to work in IE (IE8 specifically). Here is the code: PHP Code: <iframe name='monkey' src='poopy.html' scrolling='auto' frameborder='0' style='background-color:gray;width:500px;height:150px;'></iframe> And the document in the IFRAME is trivial PHP Code: <div style='padding:8px;border:1px solid black;background-color:white;'> This is a bunch of txt THis is a bunch of txt ... (repeat this text a bunch so you have a scrollbar) </div> As far as I can tell, IE implements the background-color attribute for IFRAMES, but it seems to ignore the color - either that or its whacked-out box model requires some kinda bizarre workaround that I cannot find. Thanks in advance for the help. -- Jon I have the following coding <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <title>CSS Sample Page</title></head> <body> <table style="width: 765px; height: 426px;"> </table><div style="text-align: center;"><!-- First Row contains banner and tagline--></div><table style="width: 765px; height: 426px;"> <tbody> <tr> <td style="text-align: center;" width="50%"><font size="7">Web News</font></td> <!-- spacer cell --> <td> </td> <td style="font-weight: bold; text-align: left;">"The latest in up-to-the-minute Web news,discussion, techniques, and <br>trends"</td> </tr> <!-- Second Row contains headline--> <tr> <td colspan="3"> <h1 align="center"><br></h1><h1 align="center">Web Developers Embrace CSS</h1> </td> </tr> <!-- Third Row contains sub-head --> <tr style="font-family: Helvetica,Arial,sans-serif;"> <td colspan="3"><h2 style="text-align: center;">Simple syntax, powerful design tool</h2> </td> </tr> <!-- Fourth row contains article columns --> <tr valign="top"> <td> <p class="copy"><span style="font-variant: small-caps;"> Cascading Style Sheets (CSS)</span> is a style language for the web. It uses common printing and display terminology to allow HTML and XML authors control over the way web pages look.</p> <p>Although designed in 1996, CSS is just now becoming a useable style language because of a lack of support from the major browsers. IE 5.5 for the Macintosh, released in 1999, is the first browser to completely support the CSS1 specification. Support varies across browsers, but both Netscape 6 and IE 5 for the Windows platforms offer more complete (but still not perfect) CSS support.</p> </td> <!-- Spacer cell --><td> </td> <td> <p> Style sheets accomplish the separation of content and style that is integral to the open nature of data on the web. Currently, web page code mixes both document structure information and browser-based display properties, limiting the cross-platform compatibility of the content.</p> <p>With style sheets, the display properties are separate from the content. This accommodates the diverse variety of devices that are becoming available to browse the web. Whether you come to a web site with a Palm Pilot, PCS phone, or Windows CE device, the server can supply a style sheet that matches your display device. CSS2 supports a variety of media devices, including print, that allows content providers to single-source their data.</p> </td> </tr> </tbody> </table> </body></html> all works so far but the problem I am having is adding specific div tags to the H2 elements. DIV class="subhead"> Simple syntax,powerful @Code in Nl 2nd:design tool</DIV> if i try to add this style rule i get the above text show up in the browser and it wont align centrally. also the cascading style sheets wont show up as small caps. can anyone help me Im sorry to ask here but know of nowhere else to ask, can someone please advice me or forward me to somewhere that can help please? thanks I am regreting taking this course so bad...Thanks alot for your help in my last problem, Im onto assignment 2 now and dont have the slightest clue what to do. The instructions are so unclear, and nowhere anywhere on the internet does it give a straight forward example of how to do a CSS. I am starting with a blank page, using text pad link to a strict html. I dont know where to start and what to type. I am trying all the codes such as <h1> to put in my title and it wont work! I got it to change color with the body color property but thats as much as I can do. Can anyone give me some pointers on how to put heading and writing in my page, why wont it work? Is there a difference between this and when I put my markup in WYSIWYG? All I need to start is to put in my title Christinas cat page... What does a stndard layout look like that will be easy for me to understand? tyvm Hello everybody! Im am now designing a webpage with a pull-upmenu. The menu can be seen he http://www.fidelin.se/ucon/index.php The problem in IE7 is that the dropup-items will disappear when you move the mouse over them. Any suggestions on how to solve this? See the code in the post below. I have not constructed the menu myself, as you might see. Thanks in advance Johan I have a layout made up of divs, and held together by another div. That holder div is supposed to have a background image, but it wont show on every browser that I've tried, except IE7. Here's the id: #holder { background-image: url(/files/images/CSS/header.png); width: 750px; margin-left:auto; margin-right:auto; margin-bottom: 10px; margin-top: 10px; } Backgrounds show on other divs, so why not this one? edit: the sites @ www.tomaustin.dsl.pipex.com/webdev Ive been doing some googling and cant find out how it works how do i apply attributes like a:link, a: hover to an image I had some like Code:
image a:hover, a:link, a:active, a:visited {
border: etc..
}
this does not work..it comes up with the horrid blue and purple backgrounds how do i do it? tom: ) hi, i have a small website i need to make for a school project. Ever since i added the CSS MENU the sidebar just appears half in the middle of the site and no matter what i do, i cannot get it to the right edge. I have tried margin-right but it does nothing, even if i put it at 5. Its 5 closer away from some strange margin almost in the center of the screen HTML::::::::::::::::::::::::::::::::::::::::::::::::::: </head> <body class="about"> <div id="page-container"> <! header---------------------------------------------------------------> <div id="header"> <h1><img src="images/headings/heading.gif" width="700" height="76" alt="Enlighten Designs" border="0" /></h1> <ul id="navigation"> <li><a href="#"><span>Home</span></a></li> <li><a href="#"><span>Services</span></a></li> <li><a href="#"><span>Take a tour</span></a></li> <li><a href="#"><span>About us</span></a></li> <li><a href="#"><span>Contact us</span></a></li> </ul> <p><h1><br>Thermal IR - What is it? </h1></p> </div> <! SIDEBAR A---------------------------------------------------------------> <div id="sidebar"> <p>Sidebar, work please, Please work!</p> </div> <! CONTENT---------------------------------------------------------------> <div id="content"> <div class="padding"> </div> </div> <! COPY RIGHT---------------------------------------------------------------> <div id="copyright"> </div> </div> </body> </html> CSS::::::::::::::::::::::::::::::::::::::::: MENU START///////////////////////////////// #navigation a { color: #000; background: ##00E5EE url(left-tab.gif) left top no-repeat; text-decoration: none; padding-left: 10px } #navigation a span { background: url(right-tab.gif) right top no-repeat; padding-right: 10px } #navigation a, #navigation a span { display: block; float: left } /* Hide from IE5-Mac \*/ #navigation a, #navigation a span { float: none } /* End hide */ #navigation a:hover { color: #fff; background: #781351 url(left-tab-hover.gif) left top no-repeat; padding-left: 10px } #navigation a:hover span { background: url(right-tab-hover.gif) right top no-repeat; padding-right: 10px } #navigation ul { list-style: none; padding: 0; margin: 0; } #navigation li { float: left; margin: 0 1em; } //////////////////////////////////////////MENU END #page-container { width: 760px; margin: auto; background: #c9c9d9; } body { font-family: Verdana; } html, body { margin: 0; padding: 0; color: black; } body { font-family: Arial, Helvetica, Verdana, Sans-serif; font-size: 12px; color: #666666; background: #ffffff; } .hidden { display: none; } #header { margin: left; height: 250px; background: #c9c9d9; border-top: 1px solid #efefef; } #sidebar { top: 200px; float: right; width: 170px; padding: 5px; line-height: 18px; background: #AAAAAA; border: solid 2px black; } #sidebar .padding { padding: 25px; } #content { margin-right: 240px; line-height: 18px; background: #c9c9d9; } #content .padding { padding: 25px; } #copyright { margin-left: 25px; background: #c9c9d9; } h1 { margin: 0; padding: 0; float: right; margin-top: 57px; padding-right: 31px; } #content h2 { margin: 0; padding: 0; padding-bottom: 15px; } #content p { margin: 0; padding: 0; padding-bottom: 15px; } I am trying to get a Table Style layout using only DIVs and CSS and every combination I could find doesn't seem to work when it involves being dynamic. Statically, it works fine. In the image I attached, "1" is the final result I am trying to get. The Red and Blue boxes at the top and bottom will always have a static height of about 25px, but I want the Green in the center to be dynamic, to take up the rest of the space not occupied by the Red and Blue boxes. In example "2", if I set the green to 100% height, it will just flow outside the parent container. And if I don't set a height, as seen in example 3, it will just be a small bar and the bottom Blue box will just move on up with it. Using a table would be easy since I can easily create that basic structure that would always work, but I'm trying to make something in all DIV and CSS and the past many months, I found no solution! Anyone got any ideas that isn't Javascript based? Thanks! Hey all, So i have two files my html file: Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<a href="#">this is a test</a>
</body>
</html>
And my css file: Code:
a:link {color:#000000;text-decoration:none;}
a:visited {color:#000000;text-decoration:none;}
a:hover {color:#CC0000;text-decoration:underline;}
a:active {color:#000000;text-decoration:none;}
except that the styles don't work on the links. If i put the styles in <style> tags in the html head it works, but in a seperate file they don't, can someone help me? thanks! - legit Edit, whoops sorry, I had the wrong name for my css file Hello, Im using a separate style.css file to define everything through the site... ive put in this code: Code: .sideheadline {font-family:Verdana,Sans-serif; font-weight:bold; color:#FFFFFF; background-color: #003366;
background-image: url(images/bg.gif); background-repeat:repeat; background-attachment:fixed; font-size:10px; }
and connected to this line: Code: print "<tr class='sideheadline'><td>Look at the rest too</td></tr>"; But nomatter what i try the image wont show, i tried several images and theyre loadable from the urlbar... so the image works Now i went to w3schools and tested with the online editor... there this exact code works, but then when i copy it to my site it wont! Im using dreamweaver for a editor... Is there a fix? Hello everyone. I have a site that uses a PHP command to pull the PHP modifier from the URL and use that as a class for a header. Those classes each have their own BG image in my external stylesheet. On any browser other than IE win it works fine, headers change as the class changes. On IE win though only the first one (my "about" class) works, the rest default to the standard header. I have re-typed the rest to see if it was just a text problem but nope. Everything validates fine. The page is http://holiday.mrpunkin.com/about.php My classes are as follows: they all modify the "mid" div as you can see: Code: #mid.about {background: transparent url("/img/headers/mid_about.gif");}
#mid.activities {background: transparent url("/img/headers/mid_activities.gif");}
#mid.food {background: transparent url("/img/headers/mid_food.gif");}
#mid.travel {background: transparent url("/img/headers/mid_travel.gif");}
#mid.resident {background: transparent url("/img/headers/mid_res_rel.gif");}
#mid.health {background: transparent url("/img/headers/mid_health.gif");}
#mid.fitness {background: transparent url("/img/headers/mid_fitness.gif");}
#mid.maintenance {background: transparent url("/img/headers/mid_bg.gif");}
#mid.construction {background: transparent url("/img/headers/mid_construction.gif");}
#mid.employment {background: transparent url("/img/headers/mid_employment.gif");}
Does anyone know why IE Win won't recognize the different BG images and use those? When I view the source I can tell that its outputting the class name correctly, so thats not the issue. Please get back to me asap. Thanks. Hey there so im brand new here but ive been really frustrated with this problem im having today, it seems that google chrome is cutting of the background hovering image I am using for my navigation, here is a live link of the error. It seems to work fine for me in firefox. I am at a complete loss, any help would be greatly appreciated! I added a bright green background so that it is easier to see the error, it seems there is this mystery space below the text that should be padded 6pixels to show the view of the background hover image and its just not working . Thanks, Eric hxxp://69.65.41.169/~ehowardd/navigationerror/test.html Ment to add here is the CSS Code: Code: #navigation {
width:500px;
float:right;
padding: 40px 0 10px 0;
background: #0f0;
}
#home
{
padding-top:6px;
padding-bottom:6px;
display: inline;
text-decoration:none;
font-family: Arial;
font-weight:bold;
font-size:12px;
color:#FFFFFF;
}
#home:hover
{
background: url("images/button.png") no-repeat 0 0;
}
#home span
{
margin-left:26px;
margin-right:26px;
}
#aboutus
{
padding-top:6px;
padding-bottom:6px;
display: inline;
text-decoration:none;
font-family: Arial;
font-weight:bold;
font-size:12px;
color:#FFFFFF;
}
#aboutus:hover
{
background: url("images/button.png") no-repeat 0 0;
}
#aboutus span
{
margin-left:17px;
margin-right:17px;
}
#services
{
padding-top:6px;
padding-bottom:6px;
display: inline;
text-decoration:none;
font-family: Arial;
font-weight:bold;
font-size:12px;
color:#FFFFFF;
}
#services:hover
{
background: url("images/button.png") no-repeat 0 0;
}
#services span
{
margin-left:17px;
margin-right:17px;
}
#portfolio
{
padding-top:6px;
padding-bottom:6px;
display: inline;
text-decoration:none;
font-family: Arial;
font-weight:bold;
font-size:12px;
color:#FFFFFF;
}
#portfolio:hover
{
background: url("images/button.png") no-repeat 0 0;
}
#portfolio span
{
margin-left:19px;
margin-right:19px;
}
Hey, I have a feeling that this will not be difficult to solve, but I've come to the point where I don't really know what to do any more. They say two heads are better than one; that's why working in a team is so great, because there are people from different walks of life. So, any help you can provide me from your experiences would be great! I have five buttons that do not show up on firefox, and the images are called into play through CSS using background. You will find the code below: This is the CSS: Code:
.borderBelowNav
{
position: absolute;
top: 0;
left: 80px;
width: 937px;
height: 141px;
z-index: 2;
}
img.borderBelowNav
{
display: block;
margin-left: auto;
margin-right: auto;
}
.divNav
{
position: absolute;
top: 55px;
left: 175px;
width: 785px;
height: 61px;
z-index: 3;
}
ul#mainNav,
ul#mainNav li
{
margin: 0;
padding: 0;
}
ul#mainNav li
{
display: inline;
}
ul#mainNav li a
{
width: 138px;
height: 69px;
}
ul#mainNav li#quienesSomos a
{
width: 138px;
background: url(../images/quienesSection.gif)
no-repeat 0 0;
top: 0;
left: 0;
}
ul#mainNav li#quienesSomos a:hover
{
background-position: 0 -72.9px;
top: 0;
left: 0;
}
ul#mainNav li#campamentos a
{
width: 138px;
background: url(../images/campamentosSection.gif) no-repeat 12px 0;
top: 0;
left: 0;
}
ul#mainNav li#campamentos a:hover
{
background-position: 12px -71.2px;
top: 0;
left: 0;
}
ul#mainNav li#noticias a
{
width: 150px;
background: url(../images/noticiasSection.gif) no-repeat 14px 0;
top: 0;
left: 0;
}
ul#mainNav li#noticias a:hover
{
background-position: 14px -72.5px;
top: 0;
left: 0;
}
ul#mainNav li#aplicacion a
{
width: 150px;
background: url(../images/aplicacionSection.gif) no-repeat 0px 0;
top: 0;
left: 0;
}
ul#mainNav li#aplicacion a:hover
{
background-position: 0px -76.1px;
top: 0;
left: 0;
}
ul#mainNav li#contactos a
{
width: 150px;
background: url(../images/contactosSection.gif) no-repeat 0px 0;
top: 0;
left: 0;
}
ul#mainNav li#contactos a:hover
{
background-position: 0px -72.2px;
top: 0;
left: 0;
}
This is the HTML: Code: <img class="background" src="images/treesInFog.jpg" alt="" /> <img class="innerBackground" src="images/bgroundmain02.jpg" alt="" /> <!--This div is for the black border behind the nav--> <div class="borderBelowNav"> <img class="borderBelowNav" src="images/borderBelowNav.jpg" alt="" /> </div> <div class="divNav"> <ul id="mainNav"> <li id="quienesSomos"><a href="quienesSomos.php" title="Quienes Somos"> </a></li> <li id="campamentos"><a href="campamentos.php" title="Campamentos"> </a></li> <li id="noticias"><a href="#" title="Noticias"> </a></li> <li id="aplicacion"><a href="aplicacion.php" title="Aplicacion"> </a></li> <li id="contactos"><a href="#" title="Contactos"> </a></li> </ul> </div> Here's the page: http://ktd.sytes.net/files/index.html In Mozilla, on Windows and Linux, and Konqueror, the image of the donkey says fixed in the center of the screen. However, in IE, it scrolls on down. Not sure what I'm doing wrong here. I think it may have something to do with my layered divs. Any ideas? Here my style sheet: http://ktd.sytes.net/files/float3.css Thanks! Hello, Can someone please tell me what I am doing wrong here. I am trying to alter the background of an input using css. It seems to work in IE but not in fierfox. Below is the sample code. Thanks. Code: <head>
<style type="text/css">
.container{
width: 610px;
height: 300px;
border:solid 3px #59813a;
}
#format1 input{
background-color: purple;
width:75px;
}
</style>
</head>
<body>
<div class="container">
<form id="form" name="form" method="post" action="index.html">
<table>
<tr>
<td >Last Name</td>
<td ><input type="text" name="name" value="enter name" class="size1" /></td>
<td>name</td>
<td><div id="format1"><input type="text" name="name" id="name" /></div></td>
</tr>
</table>
</form>
</div> <!-- container -->
The site I'm working on is at http://www.konkito.com I'm trying to fill the background of the "View Cart" link. For some reason, the background color just doesn't fill up the height of the navigation bar in IE6. Please have a look and point out what I'm doing wrong. Regards. Hi! I have a css file (validated) which contains: Code: TD.p1{ text-align: left; background-image: url('http://local/adres/img/szablon/1/g_1.gif'); }
this works properly with Opera 7.54, Mozilla, but it doesn't work with MSIE! Only in MSIE I can't see the background image. Does anybody knows what may be wrong? MSIE version: 6.0.2600.0000 I'm creating an email template for all mail that I'll send to my users. I'm trying to make it work for as many mail clients as possible, so I'm only using inline css. Even with that, it appears that gmail doesn't support the background-image property. I have a table defined as Code:
<table style="background:#666666; background-image:url(http://{$_SERVER['SERVER_NAME']}/images/bg_grad.gif); background-repeat:repeat-x; width:100%; height:100%; margin:0px; " cellpadding="0" cellspacing="0">
...
This works fine for yahoo mail. With gmail, it will render "background", but as soon as I try and add an image, it ignores all of the styling. Has anybody run into this problem? Any suggestions on a solution would be greatly appreciated. I hardly ever use css for thimgs like backgrounds, but I have a freelance client that has alot of interesting ideas about how a good website should look so I'm trying to make him happy. When I have: body { background: url('resources/assets/background.jpg') no-repeat bottom left; } in the extranal css it doesn't work. If I put it into the page it works fine. None of the online css resources I've looked at mention why this should be. I've even tried using the complete http://www.server.com/blah/blah/ address and I get the same results. Does this just not work from an external css, or am I missing something? Thanks y'all. |
|||||||