|
CSS - Ie - Css Formatting Problem
I've run up against a css problem with the homepage on this site under development. In IE8 the right column in the main content area contains an image swapper and the column pushes out beyond the page content area. It displays properly in FF3. I've tried a variety of margin, padding and width changes without success. How do I correct this for all IE and FF browsers? To avoid bloat I have not included the stylesheet here, but it can be viewed in FF.
Similar TutorialsI'm working on a project for school, I'm nearly done, but for some reason, in Firefox the first link in my navigation menu doesn't fit the formatting of the rest. The link is 'About Us'. Please see he http://lovemeforme.org/testing/ any ideas? I'm stumped! Hi, I have modified a form for a web blog for a friend, and got extra fields included for them. But we have an issue on the pc with internet explorer and the position of the elements in css. On safari and opera and firefox, all the labels for the form tags line up correctly, but on internet explorer they do not, the message label is lined up with the address, how can we fix this. If you look at this page: http://website-traffic.inpress.co.uk/contact-us/ You can see what we mean with the form. How can I fix this problem with the css to get them all correctly lined up. Many thanks Barry Hi... I have a slightly confusing problem. I have an external sheet which all works fine except the colour of links before they are visited, active, etc. (It worked fine but one day stopped without any intervention on my part that I know about!) The active link, visited link and hover link colours work as required and as specified in the external sheet, but it is the original link that does not, defaulting to the, erm, default colour. My external sheet is as follows: body {background-image: url("images/logo.jpg")} type="text/css"; a:link {color: #c0c0c0;} a:visited {color: #FF80FF;} a:hover {color: #FF00FF;} a:active {color: #FF80C0;} h1.c1 { text-align: center; font-size: 46pt; color: #bb8ec8 } h1.c2 { margin-left:130px; font-size: 26pt; color: #bb8ec8 } h4 { text-align: center; color: #b15fb8 } Any idea why is isn't working? Cheers I am running amuck! know this should be basic, but Firefox and IE both handle the <h1> tags differently: 1) IE seems to put equal whitespace above and below the element 2) Firefox seems to put less whitespace AFTER the <h1> tag. Anyway to smooth this out so it displays close to similiar? My gratitude ahead of time... hi all, need one help from you.. i have to format a div tag which is generated dynamically.. if there are only 4-5 lines consists in that div it works fine, but the lines go out of bound it takes scroll bar overflow:auto; overflow-x:hidden; height:200px; in mozzila it works fine as the scroll bar comes inside the div tag... but in internet explorer .. the scroll bar goes out of the div tag.. can anybody help me... Hi, Can anyone please help with formatting a list? In the simple list below, I would like; 1) The main list items should always be positioned at top 0px, left 90px of it's container (done) 2) Nested list items should be hidden (done) 3) The nested item that belongs to the "selected" list item, should be visible (done) 4) The nested item that belongs to the "selected" list item, should always be positioned at top 0, left 0 (I can't do this) 5) The main list items should be on top of the visible sub item (I can't do this, the sub item is always on top) Many thanks for any pointers, Cheers, Mark 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>
<title>Untitled</title>
</head>
<body>
<style type="text/css">
#container{position:relative;height:100px;border:1px solid #000}
#container ul{list-style: none;padding: 0;margin: 0;position:absolute;top:0px;left:90px;width:100px;z-index:20;}
#container ul ul{display:none;}/* hide nested lists */
#container ul li{display:block;width:100px;background:red}
#container li.selected ul{display:block;} /* show nested list for item with selected class */
#container li.selected ul li{width:100px;position:absolute;top:0px;left:0px;background:yellow;z-index:10;}/* style nested item */
</style>
<div id="container"><div style="clear:both"></div>
<ul>
<li class="selected">item 1
<ul>
<li>Nested item 1</li>
</ul>
</li>
<li>item 2
<ul>
<li>Nested item 2</li>
</ul>
</li>
<li>item 3
<ul>
<li>Nested item 3</li>
</ul>
</li>
<div style="clear:both"></div>
</div>
</body>
</html>
Ok, so I'm having some problems getting my site to look how I want. The formatting appears correctly in all browsers (I think) but in IE it's horribly messed up. This is my first site that I'm making just to learn some things and I don't know much CSS at all. I've tried reading up but am not sure how to properly use CSS to make this work cross browser capable. Basically, I want my text box search bar properly centered along with my logo and the "advanced search" and "preferences" links. I painted over some stuff for privacy heh. In FireFox, it looks like this ( http://img261.imageshack.us/img261/9625/ex1hu0.jpg ) but in IE, it looks like this ( http://img523.imageshack.us/img523/4631/ex2sm7.jpg ). So basically in IE the search bar and what not is aligned too high! How can I use CSS to make it looks like it does in FireFox, in all browsers!? I learn best by example so thanks much for any help!!! My probably terrible code is as follows: Code: <table>
<tr>
<td valign="middle">
<a href="/home"><img src="logo.jpg"></a>
</td>
<td valign="middle">
<form id="SearchBarForm" action="search.php" method="get">
<input type="text" name="q" size="30" maxlength="150" value="'.($q).'" title="Search">
<select name="FTS"> <!-- FTS = File Type Selections -->
<option value ="File_Type">File Type</option>
</select>
<font size=-1><input type="submit" name="Submit" value="Search"></form></font>
</td>
<td nowrap> <a href=/advanced_search.phpf>Advanced Search</a><br> <a href=/preferences.php>Preferences</a>
</td>
</tr>
</table>
Is there a way to use CSS to format printer output specifically for a sheet of paper such that page breaks can be formatted in at specific points? Hi, I have changed my test site so I can display an ad and so that each section is separated into different sections, anyway after changing a few things and fixing a few problems I have found that the problem is happening with my #ContentMain except I have no idea how to fix it. Essentially #ContentMain is appearing before it should be (ignoring the formating and appearing behind everything) when it should be appearing directly after <div id="main1"> everything I have tried, I have had no success with. Also as I have separated the gap I had between the top links and the main picture to add in in ad section (no actual css setting for it as everything I have tried hasn't worked) Where as before my editing the content appeared where it was meant to, so any help would be greatly appreciated and if you need me to explain something in more detail let me know. TorqueSRO - Click Me Hey All, I'm trying to make text float to the right, the challenge part of it all is that i need to try and do this using a class that get asigned to the text so i can't really use a DIV or anything to do this. Really what i want is a bunch of text in a text box aligned to the right with a grey background. Anythoughts or ideas? Really in a binde here. I posted a question about this in the HTML forum but maybe there is a CSS solution to my problem. I have a table that is filled with names from a database. It is filled with a first, middle , and last name. I want these to be displayed on one line and not put onto two lines. I have been using the <pre> tag but it makes my <td>'s two tall for my liking(only in IE). Is there something I can do make sure the name is displayed on one line and make sure the td is only as tall as the font that is used? Here's a snippet of the code. Code: <td><pre><a href="ViewProfile.pl?StudentID=$studentID[$x]">$firstName[$x] $middleInitial[$x] lastName[$x]</a></pre></td> I'm working on a project where the client wants a table of data, and one column of data is money, such as "$1.23". The client would like all the "$" aligned on the left side of the column and all the amounts aligned on the right side. Now I could do something like: Code: <td> <div style="float:left">$</div> <div style="float:right">1.23</div> <td> (Obviously I'd change those to classes.) That works, but it seems sloppy, so many extra divs for a tiny little formatting thing. I could also put the "$" into a background image, but then you lose something if you're using a screen reader. I looked into doing something with :first-letter, but there's no way to say "everything else but the first letter float right" without wrapping the amount in a span or div, which still seems sloppy to me. Is there another way to approach this, CSS or otherwise? Hello all, I'm trying to add digg stories to my site & want to format it with css. Digg says you can use CSS with the class names to customize the display. Havent use css before so I'm lost...if someone could hook me up with this I would sure appeciate it. I would like to be able to format the links and text differently. The code I want to use to add digg is: Code: <script language="JavaScript" src="(URL address blocked: See forum rules)/diggjs/front/tech_news/0" type="text/javascript"></script> I'm going to put it in a frame so just on a blank page. Thanx! Hi all, I am in the process of writing a news script in php, i want to display the articles in a downward way, using divs.. I am having a problem in IE & firefox where the image flows out of the bounds of the div and overlaps in the following div whereas I actually want the div to contain the image so the next div will start below.. I can fix this in a number of ways in firefox (display: table; not sure if its right but it works), but nothing I try seems to work in IE, is there a correct way of doing this that will worth in both browsers? I have included the red border to demonstrate how it is overlapping over the other div.. 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=iso-8859-1"><title>GenerationQ - News</title>
<style type="text/css">
div.spotlight {
text-align: left;
border: solid 10px red;
}
div.spotlight * {
margin: 0 auto;
border: 0;
padding: 0;
}
div.spotlight img {
float: left;
}
div.spotlight p.title {
text-align: left;
font-size: 12px;
font-weight: bold;
padding-bottom: 12px;
}
div.spotlight p {
font-size: 12px;
}
div.spotlight p.desc {
font-size: 12px;
padding-bottom: 3px;
}
div.spotlight p.byline {
font-size: 9px;
padding-bottom: 20px;
}
div.spotlight span.username {
font-size: 11px;
}
div.spotlight span.publishdate {
font-size: 10px;
}
div.section {
text-align: left;
border: solid 10px red;
}
div.section * {
margin: 0 auto;
border: 0;
padding: 0;
}
div.section img {
float: left;
}
div.section p.title {
text-align: left;
font-size: 12px;
font-weight: bold;
padding-bottom: 12px;
}
div.section p {
font-size: 12px;
}
div.section p.desc {
font-size: 12px;
padding-bottom: 3px;
}
div.section p.byline {
font-size: 9px;
padding-bottom: 20px;
}
div.section span.username {
font-size: 11px;
}
div.section span.publishdate {
font-size: 10px;
}
</style></head><body>
<h3 align="left">News</h3><div class="spotlight">
<img src="be51273175be707e583f4c3591dd3c3d71564018.jpg" alt="">
<p class="title"><a href="http://localhost/mmm/viewarticle.php?article=This-a-test-article-of-Link-type-with-an-image%21-1">This a test article of Link type with an image!</a></p>
<p class="desc">This a test article of text type with an image!</p>
<p class="byline">by <span class="username">Administrator</span> on <span class="publishdate">2006-08-29</span></p>
</div>
<div class="section">
<p class="title"><a href="http://localhost/mmm/viewarticle.php?article=This-a-test-article-of-Link-type-without-an-image%21-1">This a test article of Link type without an image!</a></p>
<p class="desc">This a test article of Link type without an image!<span class="smallText"></span></p>
<p class="byline">by <span class="username">Administrator</span> on <span class="publishdate">2006-08-29</span></p>
</div>
</body></html>
I have included the image as an attachment for easy of testing the code above so you can see what I mean! Hopefully someone could help? thanks in advance, regards // infin. I have a table whose class is "dogs" How do I make all the <tr> elements within the table dogs have a certain style and not all the <tr> elements on the page? Hi, Really new to this css stuff and i'm sure i'll get a beratting for asking such a simple question but here goes... What i need is a cell with a linked word in it. Initial state is white background with blue text. On rollover i would like the whole cell to turn blue with white text. I'm sure this is simple but just need a point in the right direction. Thanks for any help Tom Hi, I need help with formatting a calendar using CSS. Here's a list of the goals I'm trying to achieve: The day numbers are positioned in the top right corner of the cell. The event text is centered both vertically and horizontally within each cell. The day number doesn't affect the centering of the event text (i.e., it's as if it has zero width). I need to be able specify a minimum width and height for the cells. I have a png of the effect I am trying to achieve, but unfortunately I can't post it being a brand-new member. If seeing it would help, let me know and I guess I can PM the url to you. Update: Here's the link to the png: Code: http://tapestryfolkdance.org/images/calendar.png Below is what I've tried. However, the event text is not centered vertically within each cell, and the first couple of events are not centered horizontally in the cell. It is fine if the event text overlaps with the day number. Code:
<html><head><style>
table { text-align: center; border-style: solid; border-width: medium; border-spacing: 0px }
td { border-style: solid; border-width: thin; border-color: black; }
.day {
margin: 0px; text-align: center; font-style: bold;
border-style: solid; border-width: thin; border-spacing: 1px;
font-size: large; color: black;
float: right;
}
td {
text-align: center; color: black; font-size: small; min-width: 60px; min-height: 120px;
vertical-align: top;
}
</style>
</head><body>
<table>
<tr>
<td>
<div class=day>2</div>event 1<br></td>
<td>
<div class=day>3</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>4</div>event 1<br></td>
<td>
<div class=day>5</div>event 1<br>event 2<br>event 3<br></td>
<td>
<span class=day>6</span>event 1<br>event 2<br>event 3<br></td>
<td>
<span class=day>7</span>event 1<br>event 2<br></td>
<td>
<div class=day>8</div>event 1<br></td>
</tr>
<tr>
<td>
<div class=day>9</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>10</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>11</div>event 1<br></td>
<td>
<div class=day>12</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>13</div>event 1<br></td>
<td>
<div class=day>14</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>15</div>event 1<br>event 2<br></td>
</tr>
</table>
</body>
</html>
I am trying to style the <hr> in the following peice of my page using css selectors. I have used,
Code: td div hr {...}
, but this affects other hr's outside of this menu. Is there a way to make this work without having to give the hr a class name? Thanks. Code:
<td width="140" bgcolor="#EFBE56" class="Menu_WhiteText_GoldBkgd"><div align="left">
<p class="side_menu_white"><br>
<a href="In-The-News.htm" style="color: white">in the news...</a> </p>
<p class="side_menu_white"> <a href="Press_Releases.htm" style="color: white">press releases</a> </p>
<p class="side_menu_white"><a href="Newsletter.htm" style="color: white">newsletter</a> </p>
<p class="side_menu_white"><a href="Multimedia.htm" style="color: white">multimedia </a></p>
<p class="side_menu_white"><a href="../About/annual_reports.htm" style="color: white">annual reports</a> </p>
<p class="side_menu_white"><a href="Contact.htm" style="color: white">contact media relations & communications</a> </p>
<hr>
<p><span class="Menu_WhiteText_GoldBkgd"> <a href="PhotoRelease-ConsentForm.pdf" target="_blank">consent form</a> </span> <span class="Body_Text2"><span class="Body_Text"><br>
<br>
</span></span></p>
</div></td>
Yes, this is actually a CSS question, despite me providing HTML code... I'm at my wit's end with IE. In the code below, "outer" is losing all formatting--background color, border, you name it, it's gone. html4strict Code: Original - html4strict Code <div id="outer" style="width: 410px;"> <div id="left" style="float: left; width: 200px;"><p>stuff</p></div> <div id="right" style="float: right; width: 200px;"><p>stuff</p></div> <div style="clear:both; font-size: 0; height: 0; width: 0;">&nbps;</div> </div> <div id="outer" style="width: 410px;"> My stylesheet is set up just fine (works fine in Firefox), so I assume this is one of those weird float bugs in IE. The thing is, it was rendering fine until I added another <div> in an entirely different location. Yes, it's all formatted correctly and validates XHTML 1.0 strict. Am I missing something, or is a known bug that I can't find documented, or does anyone have a suggestion for an alternate approach? Thanks all! |
|||||||