|
CSS - Help With Alignment Issue With I.e. 6
Here is the thing.. i got this code that works just fine at any browser except IE < 6.
Look the issue's image (better than explaining): http://img23.imageshack.us/img23/43/borderissue.jpg The code (for the page in the screenshot) Code:
<div id="container">
<div id="main">
<!-- INCLUDE CONTENT -->
<div id="content">
<!-- Conteudo Novidades -->
<div id="midnewsb">
<div id="midwrap">
<div id="midtitle">
<img src="bar_news.jpg" border="0" /> <b>NOVIDADES</b>
<div id="midnews">
<div id="textwrap">
<p><font color="#333333">dd/mm/aa - Novidade 1</font><br />
- Novidade 1 novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade</p><br />
<p><font color="#333333">dd/mm/aa - Novidade 1</font><br />
- Novidade 1 novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade</p><br />
</div>
<div id="midb"></div>
</div>
</div>
<br />
</div>
<div id="midb"></div>
</div>
<!-- FIM Conteudo Novidades -->
</div>
<div id="block"><br /></div>
<!-- FIM INCLUDE CONTENT -->
</div>
</div>
And the CSS: Code:
#container {
position:relative;
top:30px;
width:704px;
height:auto;
min-height:800px;
margin:auto;
margin:0 auto;
text-align:center;
}
#main {
width:704px;
height:100%;
margin:auto;
background-image:url(bg_mainb.jpg);
text-align:left;
}
#block {
margin:auto;
height:30px;
}
#content {
position:relative;
left:-3px;
top:20px;
width:496px;
height:auto;
min-height:450px;
margin:0px;
display: inline-block;
}
#midb {
background-image:url(bg_midb.jpg);
width:100%;
height:18px;
position:absolute;
bottom:0px;
}
#midwrap {
margin:6px;
}
#midtitle {
position:relative;
margin-top:2px;
width:496px;
color:#3E6F88;
}
#midnews {
position:relative;
margin-top:2px;
top:1px;
width:482px;
height:auto;
min-height:100px;
display: inline-block;
background-image:url(bg_mid.jpg);
background-repeat:no-repeat;
border:solid 1px #C9DEEC;
}
#midnewsb {
position:relative;
margin-top:0px;
width:496px;
height:auto;
display: inline-block;
background-image:url(bg_mid.jpg);
background-repeat:no-repeat;
border:solid 1px #C9DEEC;
}
#textwrap {
margin:6px;
width:476px;
height:auto;
}
Can anyone help me, please? Thanks Similar TutorialsHi guys, I've been desperately trying to get this to work but realised I have to ask for help. www johnbradbury com This looks right in Internet Explorer 7, the header bar is at the top and stretched across the whole screen. In earlier versions this is pushed down etc.... Anyone point me in the right direction? Hey, I have a three column fixed layout design. In the center, middle column, the boxes stack perfectly between the left and right columns. When the center column content's height exceeds the left and right column my problems beings; the center content'll hug the left, leaving it's center position. Website please scroll to bottom I've tried a variation of different techniques to try and fix my problem, but the solution's eluded me to no ends. Can anyone help me? Kind Regards The Coder Good day! when i run my webpages in IE8 the alignment was change i don't know why it happens. Before my webpage is fix on my screen but now the scrollbar was visible, which is i don't want to happen...is it css code help me in my problem? I have a container division set at 900px. Within this division are three column, a left, center and right. The left and center division are set to float left and the right one is set to float right. The width of the divisions adds up exactly to 900. This setup displays fine in all IE browsers except IE 6 in which it kicks the right column underneath the center one. What would be causing this??? Here is my css code for the divisions: Code: #homecontain {
width: 900px;
clear:both;
height: auto;
background : #CCEDFE;
}
#leftblend {
float: left;
margin-left: 0px;
margin-top: 0px;
width: 230px;
height: 887px;
background-image:url('Images/LeftBlend.jpg');
}
p.lefttext{
color:#FFFFFF;
text-decoration : none;
font : 10px 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica, arial, sans-serif;
text-align:left;
font-weight: bold;
font-style: oblique;
line-height:15pt;
padding-left: 20px;
padding-right: 20px;
width:150px;
}
p.leftheadlisting{
color:#FFFFFF;
text-decoration : none;
font : 12px 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica, arial, sans-serif;
text-align:left;
font-weight: bold;
line-height:15pt;
padding-left: 20px;
padding-right: 20px;
width:170px;
}
#center {
float: left;
width: 477px;
height: 887px;
margin-right: 0px;
padding : 0px 0px 0px 0px;
background : #CCEDFE;
}
p.centerheadline{
color:#000000;
text-decoration : none;
font : 20px 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica, arial, sans-serif;
text-align:left;
font-weight: bold;
padding-left: 20px;
padding-right: 20px;
width:430px;
}
p.centertext{
color:#000000;
text-decoration : none;
font : 10px 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica, arial, sans-serif;
text-align:left;
font-weight: normal;
line-height:15pt;
padding-left: 20px;
padding-right: 20px;
width:430px;
}
p.centerbottomline{
color:#0d2781;
text-decoration : none;
font : 16px 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica, arial, sans-serif;
text-align:left;
font-weight: bold;
font-style: oblique;
line-height:20pt;
padding-left: 20px;
padding-right: 20px;
width:430px;
}
#rightlogo {
float: right;
width: 193px;
height:887px;
height: auto;
background : #CCFFFF;
margin-top: 0px;
padding : 0px 0px 0px 0px;
}
Any help would be appreciated! Hello all! I am trying to create a simple website. I had it working in html alignment wise here URL But i want it working in CSS. Look here URL and tell me what it is i have done wrong. I want the two colums to sit next to each other, centered. Thanks for your time. Hello everyone. Another episode of stupid CSS tricks here! h-t-t-p://rewards.yarnell.openi.com/ This site looks good in IE8, Firefox, Safari, Chrome. Only older IE shows the rightmost DIV, the main content area, as underneath the rest of the page. This is not my first CSS only site, but for some reason, I can't figure out why it isnt displaying correctly in older IE. If you are using IE8 and need to see it broken, just throw the site into compatibility mode. I have all the DIV styles in the source, not in a stylesheet to make it easy for anyone to help me with this. I just know this is going to be something simple, and thank you in advance to anyone kind enough to give this a look! Have a great day! Hi there, I want to make the text in my post content to align left and take the same width as the image (448px). I have changed the CSS of the post content, but all that happens is the posts get more un-aligned as you go down, as if the new 'left' alignment ruins the centering of everything. I'm using wordpress. Does anyone have any suggestions as to why this is happening, and how I can align my content text to the left? Thanks. Alright, first post in a while, let me see if I can make this clear and simple so I can fix this issue. I am making a website for my history project. I have made the website solely by hand and using an HTML editor; I have quite a bit of knowledge in CSS and HTML, but really, this is a great learning process for me. The website design is laid out in table form. There are just two columns, a sidebar and the main content column. The text causes the table to be stretched out (you can see this by changing the border to "1" and viewing the table. However, when the main text strechtes the table, the side bar moves with it, settling in the center of the smaller column. The entire thing creates a problem like this: My History Website The source code for the site can be checked through your browser, or if you are too lazy, this is what I have written: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>History Through The Ages: 1865-1900</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Ethan Mick">
<!-- Date: 2008-05-21 -->
<!-- I will eventually put this style sheet into its own external CSS file.-->
<style type="text/css">
<!--
body {
background:gray;
}
p {
color:white;
text-align:left;
position:top;
text-indent:1cm;
vertical-align:top;
}
h2 {
color:black;
text-align:center;
}
.sidebar {
position:relative;
}
.ads {
display:block;
margin-left:auto;
margin-right:auto;
}
.imageright {float:right;}
.imageleft {float:left;}
-->
</style>
</head>
<body>
<img src="file:///Volumes/FAT32DATA/OmniEthan/School/US%20&%20World/History%20Logo.jpg" title="History Through The Ages" alt="History Logo" width="800">
<table width="800" border="0">
<tr>
<td width="150" height="300">
<a class="sidebar" href="file:///Users/Ethan/Sites/History%20Website/Historysite.html">Home</a><br /><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1856-1900.html">1865-1900</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1901-1920.html">1901-1920</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1921-1940.html">1921-1940</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1941-1960.html">1941-1960</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1961-1980.html">1961-1980</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1981-2000.html">1981-2000</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/2001-Current.html">2001-Current</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/Bibliography.html">Bibliography</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/Genealogy.html">Mick Family Genealogy</a><br /><br />
<a href="http://www.mozilla.com/en-US/firefox/"><img class="" border="0" alt="Firefox 2" title="Firefox 2" src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/firefox-spread-btn-1b.png"/></a>
</td>
<td width="*">
<h2>Emerging from the Civil War to the turn of the century<br />1865 to 1900</h2>
<img class="imageright" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/DeadUnionsoldiercivilwar.jpg/250px-DeadUnionsoldiercivilwar.jpg" title="A dead soldier in Petersburg, Virginia 1865. Photograph by Thomas C. Roche">
<p>The United States emerged as a whole country from the Civil War, thanks to Abraham Lincoln and the union army, although not without consequences. Over half a million people were killed in the war. The United States' primary goal at this point was reconstruction from the war, and a lot of work had to be done in the south.</p>
<p>This time period set up the United States for many years to come. During the reconstruction the United States began to industrialize, creating thousands of miles of new infrastructure, and machinating a lot of jobs which had to be done by hand before. The industrialization allowed huge corporations to be formed, like Standard Oil created by John D. Rockefeller in 1870 and Carnegie Steel Company created by Andrew Carnegie in the mid 1870's, many of which gained a monopoly in the market. The industrialization allowed the United States to get back onto her feet quicker, as the new businesses could gain a lot of income by exporting their goods on the new infrastructure.</p>
<p>The South wasn't happy about losing the war, and it wasn't happy about being back in the union. During reconstruction many groups of people made clandestine acts against the government, and some others made their attacks public, such as the KKK. The reconstruction acts involved the dismantling of southern governments, and the southern states were only allowed to have their own government after the majority swore a loyalty oath to the Union, and they ratified the new amendments, the 13th, 14th, and 15th. Even then, once the southern people regained their own governments, everything that the North had been fighting for, rights of African-Americans, were largely ignored, and the African-Americans had to suffer even more discrimination. To make matters worse, the courts ruled in Plessy vs. Ferguson that segregation was legal on the premises of "separate but equal."</p>
<img class="imageleft" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/14/USS_Maine_h60255a.jpg/300px-USS_Maine_h60255a.jpg" title="USS Maine - Wikimedia Commons">
<p>To heal the scars which had been formed in the Civil War, the United States decided to jump aboard the imperialistic boat, and attacked the weakened Spanish empire, fighting Spain for Peurto Rico, the Philippines, Guam, and Cuba. The war was extremely single sided, with the United States decimating the Spanish fighters on almost all fronts. The only interesting points of the war was the Philippines and Cuba. In the Philippines, native freedom fighters had been fighting the Spanish for a long time, and they viewed the Americans as saviors coming to help their cause. However, when it became apparent that the American's weren't going to leave, they became angry and fought us as well. In Cuba, Roosevelt would lead the "Rough Riders" to fight the against the spanish with some Cuban help.</p>
<p>My family on both sides was in the United States at this point, but I am not positive where they were. My family was not seriously affected by the segregation and racism partaking in the south during this time; indeed, my ancestors who moved to the United States in 1730 opposed slavery. Seeing the cruelly and imbalance in South Carolina, where they landed, they moved to Illinois. This affected Grandma Lori, my mother's mom, and her attitude on life.</p>
</td>
</table>
<img class="ads" src="file:///Users/Ethan/image_1.png">
</body>
</html>
I recently added the "sidebar" class, trying to bring the links up, as you can see with the one I tested it on. Didn't work. I have tried other ideas, but I nothing worked. Also, if you have some advice (that doesn't require me completely rewrite the site) feel free to ring it by me. So my question is, without doing anything repetitive or stupid, and preferably with CSS, how can I cause the text (the links) in the sidebar to align to the top of the page, and make it look nice. If you need more information, lemme know. I've added a background to my site which sits behind the content, in firefox it works fine, it sticks to the bottom of the browser fine, the same applies in IE, but we all know the IE PNG bug, so I used filter instead to load the PNG. But now the image is aligning at the top of the div: Screenshot The red shows where the div is actually covering, and it does cover right down to the bottom of the browser. How do you go about getting the filtered image to go to the bottom of the div? Theres maybe a simple solution but at the moment its not coming to me. I'd rather not use another file format, thats the last resort. Nevermind, folks over at codingforums helped me. Hi, I've decided to take the plunge and try using CSS to replicate a table layout. I've appended my code below. My issue is that I cannot get the menu and content <DIV> to align next to each other. Any tips gratefully received. PHP Code: !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>CSS Layout</title> <style type="text/css"> <!-- P { color: white; } body { background-color: #000000; text-align:center; } #box { width: 750px; margin: 0px auto; background color: #ccc; text-align: left; border:1px solid white; } #banner { width: 745px; margin: 10px; height: 100px; border: 1px solid white; background-color: #000000; } #menu { margin-left: 10px; background-color: #000000; width: 200px; border: 1px solid white; } #content { background-color: #000000; width: 500px; border: 1px solid white; } #footer { width: 745px; margin: 10px; height: 50px; border: 1px solid white; background-color: #000000; } !--> </style> </head> <body> <div id="box"> <div id="banner"> <p> this is my banner </p> </div> <div id="menu"> <p> this is the menu </p> </div> <div id="content"> <p> this is my content </p> </div> <div id="footer"> <p> this is my footer </p> </div> </div> </body> </html> I have a table inside of a div, and I need to push the table down a little bit but can't get it to without using line breaks, which push it down too far. I have a background image that I'm using to emulate a shadow and need the table to just be a little bit lower so that the upper right hand corner image blends in with it. Here is my CSS: Code:
#header {
width: 100%;
height: 90px;
padding-bottom:5px;
padding-right: 10px;
margin-bottom: 5px;
vertical-align: bottom;
background: url(img/hd_shw.gif) no-repeat right;
}
.top {
width: 16px;
height: 16px;
vertical-align: top;
}
.bottom {
height: 16px;
width: 16px;
vertical-align: bottom;
}
.blue_fill{
background-color: #4095BF;
}
My HTML: Code:
<div id="header">
<table class="hdr_bk" align="center" width="100%" style="height: 92%;" cellpadding="0" cellspacing="0">
<tr>
<td class="top" style="background: url(img/b_tl.jpg) no-repeat top left #4095BF;"></td>
<td class="blue_fill"></td>
<td class="top" style="background: url(img/b_tr.gif) no-repeat top right;"></td>
</tr>
<tr class="blue_fill">
<td></td>
<td>Header</td>
<td></td>
</tr>
<tr>
<td class="bottom" style="background: url(img/b_bl.jpg) no-repeat bottom left #4095BF;"></td>
<td class="blue_fill"></td>
<td class="bottom" style="background: url(img/b_br.jpg) no-repeat bottom right #4095BF;"></td>
</tr>
</table>
</div>
I realize that there is a gap, which will be fixed when I figure out how to push down the table. Hello everyone! A pre-emptive thank you to anyone and everyone who reads and responds to my questions! I'm new to CSS, being more of a designer and far, far less of a coder, so forgive any potential glaring errors I may be making. I'm having to learn all this stuff as I go along, with little to no guidance, so any advice you guys might have as far as repairing my lackluster coding will be taken with shy graciousness. I'm attempting to put together a basic template for a website I am trying to build, to use in conjunction with concrete5, an open-source CMS. I've managed to make it look and operate correctly in IE and Chrome, but in FireFox the navbar on the bottom does not align itself correctly. It jumps several hundred pixels down the page and jolts sharply to the left. I've managed to make use of the @-moz tag to get it to accept FireFox-specific behavior. However, I cannot get it to maintain absolute positioning, despite assigning it that attribute. Rescaling the window or zooming in and out in a browser causes it to slide around willy-nilly, even if I reposition it specifically in the CSS. As a note, I had a lot of trouble getting other elements to properly center in the process of making the whole template, but I'm not sure what was causing that, either. I've not been able to get things to center themselves properly or respond correctly to instructions; I'm basically running in the dark, here. The code is below. Please let me know what I'm doing wrong! Code:
<?php
defined('C5_EXECUTE') or die(_("Access Denied."));
$this->inc('elements/header.php');
?>
<body>
<div id="container">
<div id="navbar">
<div class="navspacer">
<a href=""></a></div>
<div class="nav1">
<a href="plans.html"></a></div>
<div class="nav2">
<a href="phones.html"></a></div>
<div class="nav3">
<a href="broadband.html"></a></div>
<div class="nav4">
<a href="index.html"></a></div>
<div class="nav5">
<a href="services.html"></a></div>
<div class="nav6">
<a href="accessories.html"></a></div>
<div class="nav7">
<a href="locations.html"></a></div>
<div class="display">
<div class="presentation">
<div class="columnzone">
<div class="column1">
<div class="columncontent">
<?php
$a = new Area('Sidebar');
$a->display($c);
?>
</div>
</div>
<div class="column2">
<div class="columncontent">
<?php
$a = new Area('Main');
$a->display($c);
?>
</div>
</div>
<div class="column3">
<div class="columncontent">
<?php
$a = new Area('Column3');
$a->display($c);
?>
</div>
</div>
</div>
</div>
<div id="bottomnav">
<div class="bnav1">
<a href="contactus.html"></a></div>
<div class="bnav2">
<a href="feedback.html"></a></div>
<div class="bnav3">
<a href="employment.html"></a></div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<?php $this->inc('elements/footer.php'); ?>
</div>
</body>
And the CSS: Code: /* CSS Document */
body {
font:12px Trebuchet MS, Tahoma, Arial;
color:#000000;
background:url(/images/bg.jpg) repeat;
}
#container {
margin:0 auto;
width:1050px;
bottom:0;
}
/* NavBar */
#navbar {
width: 928px;
height: 90px;
position:absolute;
padding-left:50px;
top:0;
}
#navbar li {
list-style:none;
display:inline;
}
.navspacer a {
display:inline;
float:left;
width: 20px;
height: 90px;
background:url(/images/nav00.png) no-repeat;
text-decoration: none;
position:inherit;
}
.nav1 a {
display:inline;
float:left;
width: 132px;
height: 90px;
background:url(/images/nav01.png) no-repeat;
text-decoration: none;
position:inherit;
}
.nav1 a:hover {
background:url(/images/nav08.png) no-repeat;
}
.nav2 a {
display:inline;
float:left;
width: 127px;
height: 90px;
background:url(/images/nav02.png) no-repeat;
text-decoration: none;
position:inherit;
}
.nav2 a:hover {
background:url(/images/nav09.png) no-repeat;
}
.nav3 a {
display:inline;
float:left;
width: 139px;
height: 90px;
background:url(/images/nav03.png) no-repeat;
text-decoration: none;
position:inherit;
}
.nav3 a:hover {
background:url(/images/nav10.png) no-repeat;
}
.nav4 a {
display:inline;
float:left;
width: 114px;
height: 90px;
background:url(/images/nav04.png) no-repeat;
text-decoration: none;
position:inherit;
}
.nav4 a:hover {
background:url(/images/nav04.png) no-repeat;
}
.nav5 a {
display:inline;
float:left;
width: 126px;
height: 90px;
background:url(/images/nav05.png) no-repeat;
text-decoration: none;
position:inherit;
}
.nav5 a:hover {
background:url(/images/nav12.png) no-repeat;
}
.nav6 a {
display:inline;
float:left;
width: 129px;
height: 90px;
background:url(/images/nav06.png) no-repeat;
text-decoration: none;
position:inherit;
}
.nav6 a:hover {
background:url(/images/nav13.png) no-repeat;
}
.nav7 a {
display:inline;
float:left;
width: 141px;
height: 90px;
background:url(/images/nav07.png) no-repeat;
text-decoration: none;
position:inherit;
}
.nav7 a:hover {
background:url(/images/nav14.png) no-repeat;
}
/* NavBar End */
/* Central Display Area */
.display {
display:block;
height:475px;
left: 74Px;
position: static ;
width:950px;
background:url(/images/display.png) top no-repeat;
}
/* Central Display Area */
/* Presentation Area */
.presentation {
display:block;
height:466px;
position: absolute;
left:71px;
width:908px;
top:421px;
background:url(/images/presentation01.png) top no-repeat;
}
.columnzone {
margin-top:-35px;
padding-top:52px;
position:relative;
z-index:0;
}
.columncontent {
padding: 18px 0px 0px 0px;
}
.column1 {
width:259px;
float:left;
padding: 0px 15px 10px 20px;
}
.column2 {
width:303px;
float:left;
padding: 0px 10px 10px 9px;
}
.column3 {
width:259px;
float:left;
padding: 0px 10px 10px 15px;
}
/* Presentation Area End */
/* Bottom Nav */
#bottomnav {
display:block;
width: 928px;
height: 90px;
position:absolute;
margin-top:887px;
margin-left:21px;
}
#bottomnav li {
list-style:none;
display:inline;
}
.bnav1 a {
display:inline;
float:left;
width: 326px;
height: 37px;
background:url(/images/presentation02.png) no-repeat;
text-decoration: none;
position:inherit;
}
.bnav1 a:hover {
background:url(/images/presentation05.png) no-repeat;
}
.bnav2 a {
display:inline;
float:left;
width: 250px;
height: 37px;
background:url(/images/presentation03.png) no-repeat;
text-decoration: none;
position:inherit;
}
.bnav2 a:hover {
background:url(/images/presentation06.png) no-repeat;
}
.bnav3 a {
display:inline;
float:left;
width: 332px;
height: 37px;
background:url(/images/presentation04.png) no-repeat;
text-decoration: none;
position:inherit;
}
.bnav3 a:hover {
background:url(/images/presentation07.png) no-repeat;
}
@-moz-document url-prefix() {
#bottomnav {
display: inline-block;
position:absolute;
width: 928px;
height: 90px;
margin-left:0px;
padding:0 0 0 0;
}
/* Bottom Nav End */
.footer {
background:url(/images/footer.png) no-repeat;
height:60px;
text-align:center;
color:#fefaca;
padding-top:18px;
margin-top: -500px;
margin-bottom:20px;
position:relative;
z-index:2;
}
Hi, I am having trouble with divs inside tables cells. I have td's in a row, and I want all the objects within these cells to be aligned at the top of the cells. However, the objects within the cells with lesser content are vertically aligning to the central level of the cell with the most content. Please check: www dot incorrectlyprogrammed dot org/CRC/ to see what I mean. This is driving me mad. Any help appreciated!! Hi, I am looking to align the links in the top right hand corner of my blog fully to the right but at the moment they are moved to the left slightly can anyone help with this? www dot gadgetwire dot co dot uk Thanks Hi guys, im new to the webdevelopment world and humbely request your help (However you may see me in the adobe related areas, i have experience there ) Im currently making a profile for my work. Here are the problems that i couldnt solve through research on other places. 1. I have this odd looking shadow appearing on the hover boxes i got (Thanks to jquery). PHP Code: .menu li { padding: 0px; margin: 0px 6px; float: left; position: relative; text-align: center; width: inherit; } (apparently its something to do with float requiring a width, but i dont fully understand..) 2. The way i have set out my body is to have greater priority to repeating-y whitebox (Its part of a double background thing i attempted) to center along with the background image set in the element html. Because of this my text is totally off, so i was wondering on how to fix this issue (i was thinking about using div tags, but im not exactly sure how to do it). It is also weird how i need to have a 4px margin to align the boxes (even though they are the same width and are positioned to centered). Help on this issue would be greatly appreciated ! Many thanks in advance <3! Notes: I have passed with no warning or issues with the Markup Validation test and CSS test at w3. I have also looked at other blogs and help threads (Like in the adobe comments), but its hard to find something your unsure what it is! refrence: renren.tssma .com I'm having trouble getting two textual elements to align oppositely, one left one right, within a DIV. Visually, I am attempting this: PHP Code: ================================================================= User: John Doe Main Menu :: Logout ================================================================= To accomplish this in all browsers as compliantly as possible, I attempted to define the outer div in CSS, align the content left in the XHTML, and then float another DIV inside to the right to hold the right-aligned textual content. I know that since <DIVs> are considered block level items, they are preceeded and followed by a linebreak. Thus, I defined the Right-floated DIV as display: inline, hoping to fix that. The CSS: PHP Code: #loginbar { height: 14px; font-size: 7pt; line-height: 7pt; font-weight: bold; color: #ffffff; background: #285064; margin: 0; padding: 3px 3px 0px 3px; } #logout { float: right; display: inline; } .loglink { font-size: 7pt; line-height: 7pt; font-weight: bold; color: #ffffff; } And the markup: Code: <div id="loginbar" align="left"> User: '.$_SESSION['fullname'].' <div id="logout" align="right"> <a class="loglink" href="main.php">Main Menu</a> :: <a class="loglink" href="logout.php">Logout</a> </div></div> This system works nicely in every browser I've tried (IE6 Win, IE5.1 Mac, Opera 7.54, Camino, Safari, and NN7.2) EXCEPT Firefox. Firefox continues to put the linebreak in before the logout, dropping the text halfway below the bottom of the div even when the div is defined as display:inline. (Interesting enough, the other so-called compliant browsers don'tput in the linebreak before the div even when it's not defined inline.) Anyone have a more elegant solution to this? I'm pretty sure I'm doing it the hard way now and can't see the forest from the trees at this point How's it going, If you look at this page, you'll notice that the text doesn't wrap around the image, but instead breaks after the caption just below the image: http://www.trophyfishingcharters.com/test/ Ideally, I want the text to wrap around the picture, with the caption remaining just below the photo. How can I pull this off? Thank you. WHAT IS THE TYPICAL CSS PROBLEM FOR THIS ISSUE? w w w. jaywayproductions . c o m/portfolio/work_history.html It suppose to look the way it looks in IE. It is a little off in Firefox. I have been try'n several things to solve this particular issue but cannot. It seems as if the bottom and top row stretches and makes the effect I was trying to accomplish look off in FF. You can understand what I'm sayin' when you view both. Does anyone know why it is doing this? Any help would be greatly appreciated! hey all... i have got a prob with a area in IE. It looks great when the users browseer is fullscreen and no favourites/history etc window is open. However once the window is resized or fav's are turned on then the content div drops to the bottom works fine in Moz FF but can't make it work in IE.. any ideas from anyone would be really great. thanks the link to the page is here and for the css click here thanks in advnaced ! RF |
|||||||