|
CSS - Ie Not Playing Nice With H1, Images, And P
I have a floated div that contains a h1, img, and then a p. For some reason, IE is putting extra space between the h1 and img, and between the img and p. Here is the xhtml:
Code: <div id="row_b_left"> <h1>Header</h1> <img src="images/row_b_divider.png" alt="" /> <p>Hello! This is where the text goes.</p> </div> and here is the relevant css: Code: #row_b_left h1 {
color: #0b819e;
font: bold 1em Tahoma, arial, sans;
margin-bottom: 0px;
}
#row_b_left p{
color: #060606;
font: .8em/1.3em arial, sans;
text-align: justify;
margin: 0px 15px 0px 0;
}
I have no idea what is causing IE to add extra space between these elements. It works perfectly in Firefox and Opera. Any help would be appreciated. Thanks in advance. Similar TutorialsI'm not sure if this is in the right place, but I'm just asking for a TEENSY BIT of code help. My first full CSS design isn't playing nicely with Internet Explorer and I can't for the life of me figure out WHY!! cabernetstudios dot com Take a look at it in firefox and in IE and you'll see the problem right away. I've managed to fix the navigation float, but I'm out of ideas on how to get the billboard images to stay up top. Email me if you think you can help! Hello, I'm trying to build a form (without tables) where the user can choose between images using radiobuttons, like this: URL http://www.karmaweb.it/varie/example-form.png (img bbcode does not seem to work, so I just inserted the link to the example image) I've tried to insert each element (radio button, image, and label or text) in a separate div with float:left and then wrap these 3 divs in an outer div, like this: Code:
.input-row
{
clear: both;
margin-bottom: 20px;
}
.input-radio
{
float: left;
width: 20px;
height: 100px;
}
.input-thumbnail
{
float: left;
width: 220px;
}
.input-label
{
float: left;
width: 200px;
}
and the html: Code: <div class="input-row"> <div class="input-radio"> <input type="radio" name="" value="" id="1" checked /> </div> <div class="input-thumbnail"> <img src="image.png" alt=""></a><br /> </div> <div class="input-label"> <label for="1">Some text</label> </div> </div> <br style="clear:both" /> but I cannot find a way to vertically center the radiobutton (image height is not fixed), besides the clear:both on the outer div doesn't seem to work (why? I had to add a br style="clear:both" after each line), and does not look very good in older browsers. Any idea how to do this? I'd appreciate any help you could offer. Thank you, Fibi Hi guys I'm having a little trouble working with CSS While doing the website in IE, i didn't notice that CSS is not working good in Firefox. PLEASE SEE THIS IMAGE FIRST SO U CAN SEE DIFFERENCES BETWEEN 2 BROWSERS: http://www.appinformatica.com/firefoxie.jpg and here is the CSS code i used. in IE it looks good, but not in Firefox.. Code:
BODY {
SCROLLBAR-FACE-COLOR: #D3F0EC; SCROLLBAR-HIGHLIGHT-COLOR: #32AAA1; SCROLLBAR-SHADOW-COLOR: #35AAA4; SCROLLBAR-3DLIGHT-COLOR: #BAEDE8; SCROLLBAR-ARROW-COLOR: #32AAA1; SCROLLBAR-TRACK-COLOR: #EFEFEF; SCROLLBAR-DARKSHADOW-COLOR: #35AAA4;
}
.verde-com-big {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: 0EB7B2;
font-weight: bold;
}
select {
background-color: #FFFFFF;
color: 4B4B4A;
font-size: 11px;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
border: 1px inset #003300;
}
form {
margin: 0px;
padding: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: inset;
border-right-style: inset;
border-bottom-style: inset;
border-left-style: inset;
border-top-color: #A7D8C2;
border-right-color: #A7D8C2;
border-bottom-color: #A7D8C2;
border-left-color: #A7D8C2;
}
input {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FF6600;
textarea {
color: #015953;
border-top: 1px inset #003300;
border-right: 1px inset #003300;
border-bottom: 1px inset #003300;
border-left: 1px inset #003300;
background-color: #FFF0B9;
border: 1px solid #A5D9C2;
}
textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #FFF0B9;
color: #FF6600;
border: 1px solid #A5D9C2;
}
Any ideas about how to make look good in Firefox too ? thanks ALOT in advance. Henry. I am new to design but really doing my best to keep up with the big boys. I am trying to tweak my site on Wordpress to have a oversized, and fluid footer. Long story short I want my site (sac247[dot]sacobserver[dot]com) to have a footer that looks like venturebeat[dot]com or mashable[dot]com. Can someone help me get started on how to break my colors out of the widget box? Ok, I am building a site for a model and I have a stripped background for the left navigation. IE7 wont display it, but of course all the other browsers do. I cant post a link cause im a newbie to this forum, but I can post my code! any help would be great: Css Code Code:
.container {
width: 1000px;
margin: 0px auto;
}
.header {
background: url(../images/headerbg.jpg);
height: 200px;
width: 995px;
margin-right: auto;
margin-left: auto;
}
.background {
background: url(../images/backgroud.jpg) repeat-x;
width: 14px;
}
.leftnav {
background: url(../images/stripes.jpg) repeat;
float: left;
width: 150px;
color: #FFFFFF;
visibility: visible;
margin-right: auto;
margin-left: auto;
}
.maincontent {
background: #FFFFFF;
width: 487px;
margin-right: auto;
margin-left: auto;
padding-right: 5px;
padding-left: 5px;
text-align: left;
float: left;
}
.rightside {
background: url(../images/body.jpg);
float: right;
height: 461px;
width: 351px;
margin-right: 2px;
}
.border1 {
background: url(../images/border1.gif) repeat-x;
height: 14px;
}
XHTML Code Code:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="../css/style.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css">
<!--
body {
background: url(../images/temp_slices_03.jpg) repeat-x;
width: 1px;
margin-top: 0px;
margin-bottom: 0px;
}
-->
</style>
</head>
<body>
<div align="center">
<div class="container">
<div class="header">Content for class "header" Goes Here</div>
<div class="leftnav">Content for class "leftnav" Goes Here</div>
<div class="maincontent">Content for class "maincontent" Goes Here</div>
<div class="rightside">Content for class "rightside" Goes Here</div>
</div>
</div>
</body>
</html>
So, I've been developing my family site on my nice little widescreen laptop... I've got the resolution set at 1280x800 and now that I am looking at the site on a much higher res monitor (at least vertically anyway...) I've noticed a glaring IE issue with the footer that I didn't notice because my right column was long enough on the 800px vertical to not notice... I've got a short content test page here... I also have a second issue once the footer does sit at the bottom, I posted it previously here... http://www.prxa.info/area51/viewtopic.php?tid=2 On the above linked paged in firefox the bar that has the "#1" in it in the first bit has an extra space below, yet the "#2" space doesn't and it only happens in firefox . I am trying to get the text in the middle using a p with a line-height of the same height as the div containing it. The URL: http://www.dudley.nhs.uk/ The problem.... in IE7, the left menu is shifted to the right. If you refresh the page, the issue is resolved.... until you go onto one of the links again! I've split the CSS up into many files (tables, colours, fonts, left list, right list etc etc) One of my colour CSS files contains the code for the colouring of the lists. Within this, I have found: PHP Code: ul#navlist li a:hover, ul#navlistRight li a:hover { border-color: #ff0; background: #9cf; color:#000; } which seems to be causing the problem. Taking it out seems to works fine BUT I do lose the colour change. I've attached the 2 stylesheets that I use for the menu on the left. Please help! Im just curious, what are the advantages of using css to import all your images (that arnt dynamic) as apposed to inserting them into your html using the <img> tag? hey guys.. I was thinking about changing my site from being mostly table based for the layout to css based but for some reason theres a small gap between images in IE... no gap in FF though.. I made two example pages 1 without using images, and just a colored background, and one with images... the height and width for the backgrounds and for the images are both the same. small gap at the bottom of each of the divs after the image ends. www.wmbclan.com/test.php just some background colors.. without any gap between the colors. www.wmbclan.com/test2.php anyone know how to fix this? Hi, I can't believe I'm posting this but I can't seem to get this to work. I cannot load a background image through a simple div tag. It works if I switch the id selector to the BODY tag in my code and displays the image but does not work if I use the selector with the DIV tag. I have no idea why. Please help My HTML file Quote: <!DOCTYPE html> <html> <head> <title>Title of the document</title> <LINK REL=StyleSheet HREF="styles.css" TYPE="text/css"> </head> <div id="header"> Div Tag here </div> <body> The content of the document...... </body> </html> My CSS file Quote: #header { background-image: url(navtext.png); background-image: no-repeat; } Use any image you have to test. i can only find the script to show background images in a css style sheet..but how would I go about for example showing an image not as background? i have style switcher, but I'm wanting to use buttons aswell for example blue.gif and red.gif using 2 different styles. how would I show the image in css?, which I can also put a link on maybe in the html or css? HElP! thanks I'm trying to get the 2 tabs of this mini calendar to be right next to each other. I've changed the names of all the divs surrounding the images and still can't get it to take out that padding. I've also tried img { margin:0px; padding:0px; } and it still doesn't work. Any ideas? Hi Folks, I've designed an H1 page heading within a DIV with rounded ends. and HTML text inbetween. It should appear as a horizontally expanding and contracting capsule. I can make one end rounded with a CSS background image in the DIV or the H1 - but how can I do the other? No tables allowed here and it has to be done only in the stylesheet. I've tried a BG in the DIV and a BG in the H1 but they don't line-up, even when there's no padding or margins. Is it possible to somehow attach an image to one side of an element? Thanks John I'm back... I want to click on a link and display a group of images (thumbnail) in a CSS box on the same page. For instance: lets say I have two links on my web page. I want to load different thumbnails in the same page depending upon which link I click. Make sense? I'm pretty new to website design. I have a lot of programming experience (C++, Java, Python) but very little HTML/CSS experience. I'm learning Django right now and am having trouble with my presentation. I'm hoping someone here can help me. I'm not sure how many here know Django so I'll try and skip over as much of that as I can. I have a somewhat cookie-cutter CSS stylesheet I'm using so I can learn the environment. Below are snippets of my .html files and .css file. base.html Code:
<body>
<div id="header">
<div id="title">
<div id="innertitle">
{% block header %}{% endblock %}
</div>
</div>
</div>
index.html Code:
{% block header %}
<h1>Signal Auctions</h1>
{% endblock %}
main.css Code:
#header {
margin:0 auto;
}
#title {
padding:20px 20px;
margin:0 auto;
background:#333 url('images/titlebg.png') repeat-x scroll 50% 50%;
}
#innertitle {
width:90%;
margin:0 auto;
}
h1 {
font-size:3em;
padding-left:10px;
}
The problem is that I can't seem to get the image images/titlebg.png to display. I don't think it's an issue with pathing - I have other images in the same location that do display and I use the same method to call them. Any thoughts? i am making a web page using CSS. At the bottom of the page I have a box from left to right with thumbnails in it. I do not want these thumbnails to wrap. I tried whitespace:nowrap, but this makes the page really wide. The box the images are in has AUTO for the width. So if I re-size the window the width of the box re-sizes. In my STYLE section, I have this: .midback { background: url(file:./images/midFace.gif) no-repeat; } Yet, when I use it as the class for a table, and then have some text in a SPAN tag inside that table, it comes up blank. Why? Quote: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Untitled</title> <style> .midback { background: url(file:./images/midFace.gif) no-repeat; } </style> </head> <body> <table> <tr> <td class="midback"> fasff </td> </tr> </table> </body> </html> It works when I do this: Quote: <td width="250" align="middle" valign="top" STYLE="background-image : URL(images/midFace.gif); background-repeat: no-repeat;"> But, not when I put it in the header STYLE tag. I have a web page with three images: (http://www.stud.ntnu.no/~rasmusal/). The first one is the background image (backcenter.jpg) which repeats as it is supposed to. Then I have the image on the top (backtop.jpg) which is centered at the top and shows ok in FF but is one or to pixels off in IE. The last image is backbottom.jpg which should be at the bottom of the page, but for some reason is below the top-image. Could someone tell me how to position the images so that they are all vertically centered (in at least FF and IE), and so that top is at the top and bottom is at the bottom? The css is as follows: body { color: #444; background-color: #fbfbfb; background-image: url(backcenter.jpg); background-position: top center; background-repeat: repeat-y; margin: 0px; padding: 0px; } #topImage { background: url(backtop.jpg) center no-repeat; margin: 0 auto; width: 800px; height: 350px; } #bottomImage { background: url(backbottom.jpg) center no-repeat; margin: 0 auto; width: 800px; height: 50px; } And the html: <body> <div id="container"> <div id="topImage"> </div> <div id="bottomImage"> </div> </div> </body> Thanks!!! |
|||||||