|
CSS - Is It Unwise To Design A Fature That Can Only Be Used By A Future Ff Browser?
Code:
word-wrap: break-word ; This is not implemented in current FF browsers. However FF 3.1 will use it. They say that the beta 2 release of FF 3.1 will be in mid november. I am not sure if current FF users will generally upgrade. Does their browser prompt them to upgrade? Similar TutorialsI have this design: http://www.thewildlifemuseum.org/designs/25/content.html Code is below. Styles are mostly within the tags. IE 6 is currently the working browser, while Firefox has the obvious problem of being too wide. I really want to be able to put that curve in but won't be able to as it currently is. Any suggestions as to how to fix it? Code:
<html>
<head>
<title>The International Wildlife Museum</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
BODY,HTML {height:100%;}
BODY {margin:0; font-family:Arial,Helvetica,sans-serif; font-size:16px; background-color:#D9A156;}
#header {text-align:center; background-color:#4A308C; padding:10px; height:144px;}
#middle {background:url("images/gradbg.gif") repeat-x; width:100%;}
#menu {background:url("images/gradbg.gif") repeat-x;}
#footer {}
</style>
</head>
<body>
<div id="header"><img src="images/header.gif" alt="International Wildlife Museum: Tucson's Natural History Museum" width="465" height="144"></div>
<div style="position:absolute; left:0; top:164px; width:170px; height:467px; z-index:5;" id="menucontainer">
<img src="images/menu/menucontainer.gif" width="170" height="373">
<div style="position:absolute; left:10px; top:15px; width:160px; z-index:30;" id="menutext">
Design<br>
Design<br>
Design
</div>
</div>
<div id="middle" style="position:absolute; left:0; top:164px; height:370px;"><img src="images/gradbg.gif" width="3" height="370">
<div style="position:absolute; left:764px; top:13px; width:36px; z-index:20;" id="trcorner"><img src="images/trcorner.gif" width="36" height="34" alt=""></div>
<div style="position:absolute; left:101px; top:13px; width:699px; border:solid 3px #000000; background-color:#FFFFFF; padding-left:69px;" id="body">
<div id="content">
<span style="font-size:180px;">N N<br>
N N<br>
N N<br>
N N<br>
N N<br>
N N<br>
N N<br>
N N<br>
N N<br>
N N<br>
N N<br>
N N<br>
N N<br></span>
</div>
</div>
</div>
</body>
</html>
Hi there folks, Im about to go insane with this one. My site is akamarketing.com and you will notice on the left there is various elements about me & my blog which display fine in IE but the text continues across (without confining to its parent div width specification) in opera and firefox. According to my stats 25% are firefox so I do of course need to fix this issue. The css and html for one broken section is Code: <div align=center style="text-align:CENTER; border:<?=$bordersize ?>px dashed #000000; margin:2px; width:185px; padding:2px; margin-top:2px; margin-bottom:0px; padding 7px; float:left; margin-left:7px; padding-bottom:0px;"> <table border=0 style="border:0px dashed black;"><tr><td style="text-align:left;"><img title="David Callan" style="margin: 0px 5px 0px 0px; padding-top: 0px; border: #000000 1px solid" alt="David Callan" src="http://www.akamarketing.com/images/davesmall.gif" align="left" vspace="0" hspace="0"/>Welcome. I'm <a href="http://www.akamarketing.com/blog/about-dave/" title="Read more about Dave on our blog"><font color="#22229C">Dave Callan</font></a>, a 24 year old SEOer & Web developer from Ireland. I've been doing design, development, seo, ppc, Internet marketing etc. since I was about 15. This site is my canvas!</td></tr></table> </div> Can anyone help me with this? I've tried a couple of things mostly around float properties but no joy. Thanks in advance for any help. look at my site. it is very boxy and almost TOO structured. is there a design trick i can use to mix it up a little? specific examples would be greatly appreciated. My first post.... ok... First I would like to say THANK YOU to anyone who has time to bestow some knowledge to me on what I am sure is a highly noob-esqe situation. I would also like to say that I have thoroughly search this and other forums for my issue, unfortunately I dont think I understand CSS or any web design enough to comprehend the solutions given. I think this may require someone with the knowledge I lack to come down to my level... if you can bend that low.. and walk me thru layman term-style. Again thanks in advance for anytime spent helping out. That being said I was recently trying to jazz up my website that is hosted by a certain music community. I do a decent amount of business thru this site so I wanted to step up the interface a little and get away from using the standard page setup they give you. They do offer the option to edit CSS to construct your own for a little more customization. I jumped in, and after a few days of struggling, I got it looking how I wanted it. I was excited until I realized it looked different on almost every computer i visited the site on. My Background is fine, but the links to paypal and other content is all over the place(e.g. song player, twitter link, buttons) I have tweaked and tweaked, but have not been able to remedy this apparently common problem due to my lack of knowledge and experience. My only hope is to post the coding here and have a Smart Guy/Girl guide me in the right direction. I hope Im not asking too much guys... here goes (I know I can post my url here, how can I redirect you guys to veiw my site??) /********* SoundClick CSS Template (based on custom version Mon, Sep 28 2009) ***********/ Quote: /* general */ body {background: url((MyBGJPEGforbackground)); margin:0px;} body,div,tr,td,select,textarea,input,option {font-family:Verdana; font-size:11px;} a, a:link, a:visited {color:white; text-decoration:none;} a:hover {color:#ff0000; text-decoration:underline;} .pageFooter {clear:both; color:gray; padding:1px 0px 50px 20px;} .infoBox {width:650px; margin:50px auto; background:white; color:black; border:silver solid 1px; padding:30px; font-size:14px;} /* hardly used, its for error messages to user */ .infoBox .quotes {margin:20px; border:#4b4b4b dashed 1px; font-style:italic; padding:10px; background:;} /* main containers */ .mainTable {background: url((MainTableBGPicWentHere)) ; color:#999999; width:750px; margin-left:auto; margin-right:auto; text-align:center;} .mainContent {background:url(/images/siteNav/transbgblocks/black/bg_0.png); color:#999999; width:725px; float:left; overflow:hidden; margin:0px 0px 20px 5px;} /* IE6 doesnt support our preferred overflow:visible */ /* left navigation */ .navigation {background:url(/images/siteNav/transbgblocks/black/bg_0.png); color:white; width:300px; float:left; overflow:hidden; margin:10px 0px 20px 0px;} .navigation a:link, .navigation a:visited {color:#999999;} .navigation a:hover {color:#ffffff;} .navigationDivider {height:6px; line-height:6px; border-bottom:#232323 dashed 1px; margin-bottom:6px;} /* general elements */ .headline {background:transparent; color:transparent; font-weight:bold; border-bottom:transparent dashed 0px; border-top:transparent solid 0px; padding:330px 1px 50px 50px;} .headlineBig {font-size:22px; font-weight:normal;} .headlineSuppl {float:right; margin:0px 0px 0px 100px; color:#666666; font-size:11px; font-weight:normal;} /* for text/links on the right side of main headline (e.g. song count on main page) */ .headlineSuppl a:link, .headlineSuppl a:visited {color:#666666; text-decoration:none;} .headlineSuppl a:hover {color:black; text-decoration:underline;} .pageturner {background:; color:#cccccc; border:#4b4b4b solid 1px; text-align:right; padding:10px; font-size:13px; font-weight:normal;} /* pages menu (previous, next..), e.g. on music page, message board */ .pageturner .nonactive {color:#666666;} .pageturner a:link, .pageturner a:visited {color:#cccccc; text-decoration:none;} .pageturner a:hover {color:#ff0000; text-decoration:underline;} .listedPicsBox {border:#4b4b4b solid 1px; width:114px; height:160px; overflow:hidden; padding:2px 1px 4px 1px; margin:0px 4px 10px 4px; float:left; font-size:11px; text-align:center;} .listedPics {width:110px; height:125px; background-position: center center; background-repeat: no-repeat; margin:2px 0px 4px 0px; overflow:hidden} .breaker {height:1px; line-height:1px; clear:both} /* general color and font assets */ .color_supplemental {color:#666666;} /* used e.g. for song pages comments count */ .alternateBG0 {background:none;} /* used as background colors for comments */ .alternateBG1 {background:none;} /* alternate color */ /* main page (the default entry page) */ .mainContent .contHeadline {clear:left; font-size:16px; color:#cccccc; padding:1px 0px 2px 20px;} /* interview questions */ .mainContent .contText {clear:left; padding-left:15px;} .mainContent .contInterview {clear:left; padding-left:30px;} .mainContent .newsBox {clear:both; background:transparent; color:white; border:transparent solid 0px; margin:6px 20px 0px 20px; padding:100px;} /* main page: video box (different from video page) */ .videoBox_mainPage {padding:5px; margin:0px 100px 20px 100px;} .videoBox_mainPage .video {padding:5px; margin-bottom:10px;} .videoBox_mainPage .title {font-size:15px; text-align:center; margin-bottom:3px;} .videoBox_mainPage .shareLinks {float:right; padding:2px; border-bottom:#4b4b4b dashed 1px;} .videoBox_mainPage .labels {color:#666666; width:100px; padding-right:20px; text-align:right; float:left;} .videoBox_mainPage .info {padding-left:120px;} .videoBox_mainPage a:link, .videoBox_mainPage a:visited {font-size:13px; font-weight:normal; text-decoration:none;} .videoBox_mainPage a:hover {text-decoration:underline;} /* main page: upcoming shows */ .liveshowsBox {background:#cccccc; color:#000000; width:300px; margin:15px 2px 15px 10px; float:right; clear:right;} .liveshowsItems {padding:4px 0px 0px 0px; font-size:11px; clear:both;} .liveshowsBox a:link, .liveshowsBox a:visited {color:#000000; text-decoration:none;} .liveshowsBox a:hover {color:#666666; text-decoration:underline; cursorointer;} /* main page: standard song box on artist page (only this song box or the embedded player is used. Never both together) */ .playerBox {float:left; clear:left; padding-left:20px; margin:300px 0px 100px 0px;} .playerBox .playerHead {background:#000000; color:#cccccc; border-top:#4b4b4b solid 1px; border-bottom:#4b4b4b solid 1px; text-align:right; font-size:13px; padding:3px 5px 3px 3px;} .playerBox .playerHead a:link,.playerBox .playerHead a:visited {color:#666666; text-decoration:underline;} .playerBox .playerHead a:hover {color:#ffffff; text-decoration:underline;} .playerBox .songBox {background:#cccccc; border-bottom:#4b4b4b solid 1px; width:330px; padding:100px 0px 0px 1px; overflow:auto;} .playerBox .songBox .singleSong {color:#000000; font-size:13px; padding:1px;} .playerBox .songBox .singleSong:hover {background:#000000; color:#cccccc; cursorointer;} /* main page: VIP embedded player (only this embedded player or the standard song box is used. Never both together) */ .embeddedPlayer {margin:1px auto; width:750px;} /* main page: tabbed content headers (fans,stations) */ .tabbedCont_header li a:link, .tabbedCont_header li a:visited {background:#000000; color:#666666; text-decoration:none; margin:0px 20px 0px 0px; padding:3px 6px 3px 6px; border:#666666 solid 1px; border-bottom:none; } .tabbedCont_header li a:hover {color:white;} .tabbedCont_header li.selected a:link, .tabbedCont_header li.selected a:visited {background:#111111; color:#999999; border:#111111 solid 1px; border-top:#999999 solid 1px; font-weight:bold;} /* main page: fans, stations (tabbed content) */ .fansBox {padding:30px 20px 20px 20px; clear:both;} .fansBox a:link, .fansBox a:visited {} .fansBox a:hover {} .fancount {background:#111111; color:#666666; text-align:right; padding:3px 5px; margin-bottom:8px; font-size:11px; font-weight:normal; border-bottom:#232323 dashed 1px; border-top:#222222 solid 1px; } .fancount a:link, .fancount a:visited {color:#B8B8B8; text-decoration:none;} .fancount a:hover {color:#E6E6E6; text-decoration:none;} .fansBox_content {background:url(/images/siteNav/transbgblocks/black/bg_20.png) important; background:#111111;} .fansBoxLastLine {background:#111111; color:#666666; clear:both; text-align:right; padding:3px 5px; margin-top:8px; font-size:11px; font-weight:normal; border-bottom:#222222 solid 1px; border-top:#232323 dashed 1px;} .fansBoxLastLine a:link, .fansBoxLastLine a:visited {color:#B8B8B8; text-decoration:none;} .fansBoxLastLine a:hover {color:#E6E6E6; text-decoration:none;} .stationItem {clear:both; color:black; border-bottom:#4b4b4b dashed 1px; padding:0px 1px 0px 1px;} .stationPicBox {float:left;} .stationPics {width:70px; height:70px; background-position:center center; background-repeat: no-repeat; margin:0px 0px 1px 0px; overflow:hidden} .stationButtonsBox {float:left; padding:2px 15px 0px 5px; height:60px;} .stationsText {color:#999999; height:80px; overflow:hidden;} .stationlink a:link, .stationlink a:visited {color:#999999; font-size:16px; text-decoration:none;} .stationlink a:hover {color:#ff0000; text-decoration:underline;} /* music page */ .songsBox {border-bottom:#4b4b4b dashed 1px; width:510px; float:left; padding-bottom:2px; margin-bottom:10px;} .songsBox a:link, .songsBox a:visited {text-decoration:none;} .songsBox a:hover {text-decoration:underline;} a.songtitle:link, a.songtitle:visited {color:#999999; text-decoration:none; font-size:16px; font-weight:bold;} a.songtitle:hover {color:#ff0000; text-decoration:underline;} .songsBox .actionlinks {font-size:14px;} /* the links for full song info, add to station, rate this song... */ .songsBox .topSong {color:#666666; float:left; text-align:left; font-size:13px;} /* comments page */ .commentsWelcome {background:; color:#cccccc; margin:0px 20px 20px 20px; padding:20px; border:#4b4b4b solid 1px;} .commentsBox {border-bottom:#4b4b4b dashed 1px; padding-top:5px;} .commentsBox a:link, .commentsBox a:visited {text-decoration:none;} .commentsBox a:hover {text-decoration:underline;} .commentsBox .songComment {border-bottom:#4b4b4b dashed 1px; font-size:11px; padding:1px 3px; margin-bottom:5px;} .commentsBox .postdate {color:#666666; font-size:13px; font-weight:normal; text-align:right; margin:0px 5px 10px 0px;} .commentsBox .postdate a:link, .commentsBox .postdate a:visited {text-decoration:none;} /* for delete/edit links */ .commentsBox .postdate a:hover {text-decoration:underline;} .commentsBox .comment {font-size:14px; padding:0px 5px 0px 140px;} .commentsBox .bandSignature {border-top:#4b4b4b dashed 1px; color:#666666; width:310px; margin-top:15px; line-height:20px;} .commentsBox .ratingsBox {float:right; width:220px; border-left:#4b4b4b dashed 1px; margin-bottom:10px;} .ratingsBox .label {width:115px; text-align:right; float:left; padding-right:20px;} /* also used for .commentsPostBox .ratingsBox */ .commentsPostBox {padding:10px; margin:20px 0px; background:#FFCC99; color:#000000; border-top:black solid 2px; border-bottom:black solid 1px;} .commentsPostBox .ratingsBox {background:#ECECEC; color:#000000; clear:both; padding:7px 0px; margin:0px 250px 20px 30px;} /* video page */ .videoBox {background:black; color:#E0E0E0; padding:5px; line-height:22px;} .videoBox .video {padding:20px; margin-bottom:10px;} .videoBox .title {text-align:center; background:#121212; color:#F3F3F3; font-size:16px; padding:1px;} .videoBox .labels {color:#666666; width:200px; padding-right:20px; text-align:right; float:left;} .videoBox .info {float:left; width:440px;} .videoBox a:link, .videoBox a:visited {color:#0099CC; text-decoration:none; font-size:11px;} .videoBox a:hover {color:red; text-decoration:underline;} .videoListBox {border-top:#4b4b4b dashed 1px;} /* photo pages */ .photopage {background:black;} .selectedPhoto_box {text-align:center;} .selectedPhoto_box .selPhoto_title {background:#111111; color:#cccccc; border-bottom:#666666 solid 1px; font-size:15px; padding:4px;} .photolist {padding:10px 0px 0px 30px;} .photolist .photobox {background:none; float:left; width:118px; height:180px; margin:5px 0px 20px 10px; padding:5px 0px 10px 0px; overflow:hidden; cursorointer; text-align:center;} .photobox .photo {height:150px; width:118px; overflow:hidden;} .photobox .photoComment {color:#444444; font-size:11px;} .photolist .photobox_on {background:#222222; float:left; width:118px; height:180px; margin:5px 0px 20px 10px; padding:5px 0px 10px 0px; overflow:hidden; cursorointer; text-align:center;} .photobox_on .photo {height:150px; width:118px; overflow:hidden;} .photobox_on .photoComment {color:#999999; font-size:11px;} /* reviews page */ .reviewsBox {padding:10px 30px; border-bottom:#4b4b4b dashed 1px;} .reviewsBox .rev_headline {color:#cccccc; font-size:16px; font-weight:bold;} .reviewsBox .rev_text {padding:5px 5px 5px 30px; font-size:14px;} .reviewsBox .rev_source {text-align:right; font-size:13px; color:#666666;} /* licensing page */ .licenseSummary {margin:0px 20px 20px 20px; padding:20px; background:; color:#cccccc; border:#4b4b4b solid 2px;} .licenses {margin-top:70px;} .licenses .headline {font-size:14px;} .lic_tableSongs {border:none;} .lic_tableSongs .columnHeaders td {border-bottom:#4b4b4b solid 1px; font-weight:bold; font-size:11px;} .lic_tableSongs tr td {border-bottom:#4b4b4b dashed 1px; padding:5px 0px;} /* widgets page */ .widgetMargin { padding:8px 0px 8px 35px;} .widgetSpacer {width:100; height:15px; clear:both;} /* tag cloud */ .tagCloud {padding:10px;} .tagCloud .cloudItem {float:left; padding:2px; white-space:nowrap; margin:0 6px 0 0;} .tagCloud .cloudItem:hover {background:#005782; color:white; cursorointer;} .tagCloud .cloudS10 {font-size:10px; color:#aaaaaa;} .tagCloud .cloudS20 {font-size:11px; color:#aaaaaa;} .tagCloud .cloudS30 {font-size:11px; color:#999999;} .tagCloud .cloudS40 {font-size:12px; color:#999999;} .tagCloud .cloudS50 {font-size:14px; color:#666666;} .tagCloud .cloudS60 {font-size:16px; color:#666666;} .tagCloud .cloudS70 {font-size:18px; color:#333333;} .tagCloud .cloudS80 {font-size:22px; color:#333333;} .tagCloud .cloudS90 {font-size:28px; color:#111111; } .tagCloud .cloudS100 {font-size:36px; color:#111111;} .tagCloudMore {padding:6px 0 0 0; margin:0 10px; text-align:center; border-top:#ccc solid 1px; font-size:11px;} .tagCloudMore a, .tagCloudMore a:link, .tagCloudMore a:visited {color:#999; text-decoration:none;} .tagCloudMore a:hover {color:red; text-decoration:underline; cursorointer;} I've tried to insert a horizontal drop down CSS menu in my layout. However, the menu bar displays about 10 pixels lower in Firefox than it does in IE. <a href="(URL address blocked: See forum rules)">Link</a> I checked the margins, padding but can not seem to find a way to get the menu to display at the same position in both browsers. Any guidance is very appreciated. thanks. It looks alright in IE, but looks really messed up in Mozilla, Firefox and Netscape. I wanted vertical UL tabs down the left side. http://www.members.shaw.ca/welcomehere/test.htm please help. Hi sorry if this is the wrong place for this thread, I have been given a project to take a fully flash website and convert it into xhtml and css. There are roughly 30 pages or so but Im am really unsure of how much I should be asking as a fixed price for the work. What does everyone else usually do? I'm designing a company website. I'm relatively new to CSS and I'm having trouble creating what seems to me a very simple design:
body background: fixed full page image
banner: fixed, 100 pixels high, full-width, transparent background
nav bar: fixed, 200 px wide, auto-height, opaque nav icons, semi-transparent tiled image background
content box: scrolling, auto height, auto width, opaque text, semi-transparent tiled image background
footer: fixed, 30 px high, full width, transparent background
mockup: Here is as far as I could get in the actual design: web page attemp Ok, trying to use CSS to mirror the UNLV design header. examples of the design: http://hotel.unlv.edu/ http://alumni.unlv.edu/ etc I basically want the top header (black/red backgrounds) I am trying to do it without using tables to do the layout, but I can't seem to figure out how to do it. here is what I got: http://projects.whiteazn.com/unlvmentor/ in firefox, looks fine, except the black background doesn't seem to go all the way over. in IE, works fine, but the red background seems to get bigger (the height is bigger) and the search box seems to go to the top any ideas? (I haven't tried to float the red background part yet) Ok, this may be asking too much, but I have this design idea - http://tmh.netdbs.com/turnkey2.jpg But insofar as laying it out with CSS, I just am not sure where to begin breaking it apart and creating various divs so to speak, the main white area is where I will lay out various <P> tags and won't have a problem with that, but it is getting started that challenges me. I'd appreciate some feedback on how to approach this. TOm Hi, I'm designing a web site using a full CSS layout with XHTML. It's quite challenging as I'm used to complex table designs. My design is located at http://www.definitedigital.com/vida/index.html And the style sheet at http://www.definitedigital.com/vida/style.css There's some things that look different across browsers, and I'm not sure if it's some sort of bug or my mistake. For example, 1. On Firefox the 'Punta Del Este Vida Beach House' link image is sometimes detected and sometimes unclickable. 2. There's much more vertical spacing between the divs (logo, photo, menu) in Firefox than in IE. I'd really appreciate if someone could take a look at my CSS, as I don't really know whether I'm doing this right or not. Thanks, Ralph I am new to web development and am in the process of learning XHTML, CSS, PHP and SQL. I need to know if i am making any major mistakes in my approach to making this site as far as CSS is concerned. The site is a simple file browser which displays files and their details in a table with a vertical navigation bar. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="header"></div>
<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="/dotastats">DoTA</a></li>
<li><a href="/phpmyadmin">phpMyAdmin</a></li>
<li><a href="upload.php">Uploads</a></li>
</ul>
<div id="content">
<table>
<thead>
<tr><td><a href="upload.php?sort=filename">Filename</a></td><td><a href="upload.php?sort=ext">Type</a></td></tr>
</thead>
<tfoot>
</tfoot>
<tbody>
<?php
require("functions.php");
updateFiles();
$page = $_GET['page'];
$sort = $_GET['sort'];
if($sort == "")
{
$sort = "ext";
}
$files = getFiles($sort);
$i = 0;
$colours = array('even', 'odd');
foreach($files as $v)
{
if($i >= ($page * 20) && $i < (($page * 20)+20))
{
echo
'<tr class="'.$colours[$i % 2].'">
<td><a href="files/'.$files[$i][0].'">'.$files[$i][0].'</a></td>
<td>'.$files[$i][1].'</td>
</tr>';
}
$i++;
}
?>
</tbody>
</table>
<?php
echo "<br/>";
$pageCount = $i / 20;
for($i = 0; $i <= $pageCount; $i++)
{
echo " [";
echo "<a href='upload.php?page=$i&sort=$sort'>$i</a>";
echo "] ";
}
?>
</div>
</body>
</html>
Edit: Code: html, body {
margin: 0;
padding: 0;
}
a:link {text-decoration:none}
a:hover {text-decoration:underline}
#nav {
background: #9966CC;
height: 30px;
border: 1px dotted #000000;
margin:0;
padding:0;
text-align: center;
}
#nav li {
display:inline;
padding:0 10px;
margin:0;
font-size: 14;
}
#header {
background: black;
height: 100px;
}
#footer {
background: black;
height: 100px;
}
#content {
width: 800px;
margin: auto;
padding: 10px;
}
#upload {
text-align: center;
}
table {
font-size: 14;
}
table thead tr {
background-color: #6699FF;
font-weight: bold;
}
table tbody td {
width: 400px;
}
table tbody tr.even {
background-color: #B0C4DE;
}
table tbody tr.odd {
background-color: #CAE1FF;
}
table tbody tr:hover {
background-color: #9999FF;
}
okay, so what i want to achieve is a result similar to: www.simplebits.com anyways, first thing is that using divs when the browser is resized everything gets screwed up, however not on the above site. thanks, any help would be great. Chris I am new to this forum and need some help! I am creating a page and the sidebar has links. I have a graphic link that I DO NOT want highlighted. I have tried everything I can think of, but I don't think I am able to apply the link styling as an inline style, or am I wrong. Any help would be appreciated! http://annesweb.com/abramoff/ Help? I have designed a look for one of my buddies companies. However, it is quite complicated. I have attached the .GIF file for you to reference. The design needs to be cross-browser friendly. The navigation is going to be dynamically built using a backend application built in PHP. The nav_links will be text not images, as well as the text next to the "did you know" items. I imagine that the placement of some of the "did you know" items can be arranged to ease the slicing process. Also, the left main image (the guy) needs to be dynamic in that it rotates through images on refresh or a revisit (probably some javascript). On top of all that, I need the "featured" or "did you know" items i.e. the round images and text to dynamically change also. These will be likes into specific sections of the site. My major concern is getting the main header pieced together correctly while meeting cross-browser compatibility. I have some CSS knowledge but as i mentioned the design is quite advanced. Any ideas on how to correctly structure it to work? TIA BA Hi everyone I'm very new to CSS and I'm having some trouble getting a layout to work as I want it to. I have attached the file as a .txt as HTML files are not allowed. Just change the extension to .html. The problem, in Opera, none at all. Firefox doesn't display it properly. IE does to an extent but it has horizontal scrolling. Being new to CSS, I have absolutely no idea what needs changing. If anyone could tell me where I'm going wrong, preferably with an explanation why it has gone wrong, it'd be much appreciated. Thanks very much Hi all, After using silktide.com to test my site's score, the report suggested that I remake the site using CSS to make it tableless. The site i am remaking is www.verdicts.co.uk So far ive remade the interface which you can see he www.verdicts.co.uk/verdicts_css Problem is, i have absolutely NO clue how i would go about making much more complex table replication using CSS. For example, the "popular review catagories" as seen on the www.verdicts.co.uk homepage. ...Or the product listing pages like this one: http://www.verdicts.co.uk/items/663/items.html or how about the reviews tables as seen he http://www.verdicts.co.uk/reviews/1140/1140.html What i am asking, is: Should i try and find a way to recreate these tables with CSS, or is the only way to do this, with *some* use of tables? Silktide.com's checker says make the site "tableless" - so i am guessing it's saying not to use a single table?! Thanks Mat. Hi guys... I'm fairly experienced at webdesign, but I never actually used css for the *entire* design before (besides on one or two unfinished sites that came out badly). I was wondering if anyone could help me out designing the basic layout with css, and I can probably handle the rest. It would be much appreciated! I would like to be able to have headers for the smaller divs in each column similar to the one I have on the upper left hand side close to the nav bar. The question is this: How do I attain this effect with the header streched across the width of the containing div? http://www.nevertap.com/float/ Do I use an image? Do I use tables? I would just 'go for it' and try them all out, but Ive been coding too long today, I want to see what others think so im not making a total stab in the dark. |
|||||||