|
CSS - Considering Using Browser Sniffing - Does This Situation Need It?
I am designing two tables stacked on top of each other on a page. The first table will act like the header rows which will be stationary. The bottom table will act as the table content. It will have a fixed width and height and will be scrollable. I'm taking this approach because I have used a "single-table, CSS/JS fixed header" solution, and it proved to be very buggy across browsers.
However, my current solution is being problematic too. The problems are twofold: 1. Inconsistent browser support for using CSS with tables 2. IE6 puts the scrollbar for the bottom table on the outside of the table. So I have to use a negative margin to bring it back in. So this leaves me using standard <td width="xx"> width attributes to control the spacing of the table. Now I cannot get the table columns to line up between the two separate tables. Here is the HTML and CSS. HTML: Code: <div class="searchHolder">
<table class="dataTable topTable" cellspacing="1">
<tr>
<td colspan="2" class="bigHeader whiteSpacer">NAME</td>
<td colspan="3" class="bigHeader">PERMISSIONS</td>
</tr>
<tr>
<td width="120" class="smallHeader sortLink"><a href="#" id="sortLastName">Last Name</a></td>
<td width="120" class="smallHeader sortLink whiteSpacer"><a href="#" id="sortFirstName">First Name</a></td>
<td width="116" class="smallHeader">Manage</td>
<td width="216"class="smallHeader">View</td>
<td width="270" class="smallHeader">Delegate</td>
</tr>
<tr>
<td width="120"> </td>
<td width="120" class="whiteSpacer"> </td>
<td><label for=""><input type="checkbox" class="checkbox" id="" />Select All</label></td>
<td><label for=""><input type="checkbox" class="checkbox" id="" />Select All</label></td>
<td><label for=""><input type="checkbox" class="checkbox" id="" />Select All</label></td>
</tr>
</table>
<div class="tableScroller">
<table cellspacing="1" class="dataTable" id="staffTable">
<thead>
<!-- empty th elements needed for table to sort -->
<tr>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td width="120">Last Name</td>
<td width="120" class="whiteSpacer">Laura</td>
<td width="116"><input type="checkbox" /></td>
<td width="216"><input type="checkbox" /></td>
<td width="270"><input type="checkbox" /></td>
</tr>
<tr>
<td>Rome</td>
<td class="whiteSpacer">Name</td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
etc...
</tbody>
</table>
</div>
</div>
CSS: Code: div.searchHolder{
border:1px solid #D6d6d6;
padding:1px;
margin:0 0 25px;
}
div.tableScroller{
height:185px;
overflow-y:scroll;
overflow-x:hidden;
border-top:1px solid #E5E5E5;
}
#staffTable{
border:none;
width:700px;
/* margin-right:-16px; IE6-only style in ie6.css */
}
#staffTable thead{
display:none;
}
table.topTable{
border:none;
width:700px;
}
td.bigHeader{
background:#003399;
color:#FFFFFF;
font-weight:bold;
}
td.smallHeader{
background:#5b91d7;
color:#FFFFFF;
font-weight:bold;
}
td.whiteSpacer{border-right:3px solid #FFFFFF;}
While I can get one table or the other displaying the columns correctly, it's damn near impossible to get the other columns to line up. My intended solution is to use JS browser sniffing to write the widths of the top table's columns to match the bottoms. The content of the bottom tables may change, so I figure this would cause less need for configuration in the future. Is this reasonable? Similar Tutorialswith an included file on top of every page of my website i have Code:
<STYLE type="text/css">
A:link{color:lightblue;text-decoration:underline}
A:visited{color:lightblue;text-decoration:underline}
A:active{color:lightblueblue;text-decoration:underline}
A:hover{color:lightblue;text-decoration:underline)
textarea, submit{background-color:#19665a;}
</STYLE>
which is how i want my links to appear except for one specific page where there is a table and lots of links inside this table, i want these to have text-decoration:none for link visted active and hover. but the links on this page outside the table i want them the have text-decortation:underline i cant figure out how to do this, someone said something about classes before but this isn't a basic class thing, i have no idea what to do 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. 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;} Hi guys Please help me out. This webpage should look like this: But in some browsers the photograph (bottom right hand floating DIV with background image) does not load! WHY?! Thanks! I got it figured out. Can delete this thread! Hi! I'm relatively new at designing websites...I'm a designer...trying to jump into web. I usually use the Dreamweaver templates...and go from there. This site I've built doesn't show up at all in IE. Where'd I go wrong? Thanks for any help. I've checked out several hacks and things, but without know why it's not showing up I don't really know where to go to look for answers. Hello all. I have come across a problem while coding my new design. My site is www.devwebsites.com My code is valid html and css. My site looks perfect in Safari, Chrome, Firefox, and Opera. IE7 however has a weird "bug" type effect on the <h1> in the header div. Part of the text is being cut off. I for the life of me can't figure out what is causing this. Is this a new browser bug or is there something I did not thing of? (I tried z-index, because it seems that the <h1> is stacked underneath another element...it didn't help.) Hope a smartie here can help me out with this one. Thanks. <edit> IE7 also removes the bullets from my <ul>. Any ideas on that also? </edit> Hi; I don't mind writing straight CSS with a text editor; my big problem is cross-browser compatibility -- getting all those tweaks for everything you do to include ie 5, 6 & 7 (I guess we can drop 5 by now). To that end, I don't object to using an IDE or other tool to develop cross browser CSS. So my question is, what is/are the best resources available to handle the cross-browser issues; from broken box model, etc. ** I know about ie7-js from Dean Edwards, but I don't know how well that works. ** I know about some CSS IDE's like Aptana & Stylizer; but again I don't really know how well they handle these issues. ** And I would like to hope there are some sites out there with total references that tells you everything you need to know about cross browser CSS, though all I've found so far are piecemeal articles; how to handle this or that aspect. So in short, I don't expect one magic bullet (though that would be nice), but I'm looking for pointers to and evaluations of various resources that could be maybe used together to make this problem a little easier. Thanks how can i change the icon that is displayed at the top of the browser(by default the broswer logo) and the icon that is displayed next to pages in favourites, so that my logo shows up there? thanks Hello All, I am completely new to CSS but I really want to learn how to use it. I am making a website but the website displays differently on Explorer and on Mozilla, Explorer is 9 and Mozilla is 6.0.2. I dont know why this happens it shifts the entire site to the left in IE whereas in Mozilla it displays ok. Code: body {
background:#cfcfcf;
font-family: Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
line-height: 24px;
}
div#site_wrapper {
float:left;
margin:0px;
padding:0px;
width:100%;
}
hr.dist0 {
clear: both;
height: .1em;
margin: 0px;
padding: 0px;
visibility: hidden;
}
div#top_menu {
float:right;
margin: 1em auto;
width:100%;
height:90px;
}
div#top_menu a {
color: #660000;
}
div#page_wrapper {
float: left;
width: 100%;
background: url(../i/page_pack_wellness_style.png) repeat-y 0px 0px;
}
div#page {
margin: 1em auto;
width: 911px;
}
div#page_top {
float: left;
width: 100%;
height: 20px;
background: url(../i/page-top.png) no-repeat 0px 0px;
}
div#site_header {
float:left;
padding: 10px 10px 20px 20px;
}
I am also trying to find on the internet a good resource for beginners to learn css. Any help would be greatly appreciated. Hello, I'm confused about how exactly to name classes in a specific situation. I'm getting unexpected results, and I'm not sure if it's browser support or my code. Does .classy a { something: something; } describe all anchors nested in an element with the class "classy"? Can I do that even? Or is it the same as .classy, a { something: something; } To describe two things that both have the same styles. Do I need comma's or is .classy .classless { something: something; } the same thing as .classy, .classless { something: something; } Thanks Fist of all, i am fairly new to css, so all my code is probably somewhat incorrect. My problem is with my nav bar. I can get it to work with FF and IE, but not both at the same time. Here is the my website : http://www.thekiwieffect.com/ The css: the part commented out makes it not work with IE but it does work with FF, but when i put it in, it's the other way around. Can anyone figure out why? Right not the navbar is set up to work with IE but not FF. It looks like it's wraping or something in FF. The html part is at the bottom of the post. Code: #logonav{
margin-top : 0px;
margin-left : auto;
width : 588px;
display : inline;
}
#logonav ul {
margin : 0;
padding : 0;
white-space : nowrap;
list-style : none;
}
/*
#navbar img{
float : left;
}
*/
#logonav li {
float : left;
background : url(http://www.thekiwieffect.com/img/button_up.gif) no-repeat;
width : 98px;
text-align : center;
margin-left : 0px; /* button spacing from each other */
}
#logonav li a {
font : Arial, Helvetica, sans-serif;
text-decoration : none;
display : block;
line-height : 43px; /* trick provided by trx */
height : 43px;
color : #cf0202;
font-size: 11px;
font-weight: bold;
}
#logonav li a:hover {
background : url(http://www.thekiwieffect.com/img/button_down.gif) no-repeat;
color : #494949;
}
html: Code: <td colspan='2'> <span id='navbar'> <img width='74' border='0' height='43' src='http://www.thekiwieffect.com/img/grade.gif' /><img height='43' src='http://www.thekiwieffect.com/img/nav_left.jpg' width='3' /> <div id='logonav'> <ul> <li> <a href='http://www.thekiwieffect.com/gallery'>Image Gallery</a> </li> <li> <a href='http://www.thekiwieffect.com/forum'>Forum</a> </li> <li> <a href='http://www.thekiwieffect.com/news'>News</a> </li> <li> <a href='http://www.thekiwieffect.com/games'>Games</a> </li> <li><a href='http://www.thekiwieffect.com/index.php'>To be added</a> </li> <li><a href='http://www.thekiwieffect.com/index.php'>To be added</a> </li> </ul> </div> <img height='43' src='http://www.thekiwieffect.com/img/nav_right.jpg' width='3' /> <img height='43' src='http://www.thekiwieffect.com/img/grade.gif' width='50' border='0' /> <a href='http://www.thekiwieffect.com'> <img height='43' alt='Home' src='http://www.thekiwieffect.com/img/m08.gif' width='28' border = '0' /></a> <a href='mailto:thethreesombreros@thekiwieffect.com'><img height='43' alt='E-Mail' src='http://www.thekiwieffect.com/img/m09.gif' width='34' border='0' /></a> </span> </td></tr> And the table tag it's in looks like this: <table cellspacing="0" cellpadding="0" width="780" align="center"> thanks I am having problem making this cross browser friendly Code:
/* Div Structure */
#heading {
margin: 0;
position: relative;
top: -20px;
background-color:#0066CC;
}
#search {
float: left;
}
#img {
float:left;
}
#text {
float:right;
}
#phone {
position: relative ;
float: right ;
top: 15px ;
right: 10px
}
#head {
margin: 5px ;
padding: 0;
height: 195px;
background-color: #FDFCFF;
border: solid;
border-color: #0066CC;
border-width: 2px;
background-color: #FDFCFF;
}
#headnav {
float: right ;
margin: 100px 17px 5px 10px;
padding: 0;
}
#sidebar {
float: left ;
background-color:#FDFCFF;
border-width:2px;
border-style:solid;
border-color: #0066CC;
padding: 10px;
width: 170px;
margin: 2px;
margin-top: 5px;
height: 530px ;
}
#mainpage {
float: right;
position:relative;
width: 730px ;
right: -5px;
left: -5px;
border: solid;
border-color: #0066CC;
border-width: 2px;
background-color: #FDFCFF;
margin-top: 5px;
}
/* Side Bar */
#sidebar h3 {
color:black;
font-size: 11px;
font-weight: normal;
letter-spacing: 0.2em;
margin: 5px;
padding: 0px;
text-transform: uppercase;
border-bottom:dashed;
border-bottom-color:black;
border-width: 1px;
}
#sidebar ul, #sidebar ol {
list-style: none;
margin: 0;
padding: 0;
}
#sidebar li {
margin: 0;
list-style:none;
padding: 0;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#sidebar a {
color: #9999FF;
text-decoration:none;
}
#sidebar a:hover {
color: black;
text-decoration:underline;
}
#sidebar div {
margin: 20px 0;
padding: 0;
}
/* Header Style */
#head h1 {
font-family:Verdana, Arial, Helvetica, sans-serif ;
letter-spacing: 0.5em;
font-size: 2em;
color: black;
}
#head a {
color: black;
text-decoration: none;
}
/* Head Nav */
#headnav a {
color: black;
text-decoration:none;
}
#headnav a:hover {
text-decoration:underline;
}
#headnav p {
color:black;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:0.1em;
}
/* Main Page */
#mainpage img {
padding: 10px;
}
#mainpage h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color:black;
letter-spacing: 0.5em;
font-style: bold ;
border-bottom: solid;
border-bottom-color:#0066CC;
border-bottom-width: 2px;
}
#mainpage p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#mainpage li {
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
}
#mainpage h3 {
font-family:Verdana, Arial, Helvetica, sans-serif;
border-bottom: dotted;
border-bottom-color: black;
border-bottom-width: 1px ;
latter-spacing: 0.2 em;
font-size:18px;
}
#mainpage a {
color: #910B2D;
text-decoration:none;
}
#mainpage a:hover {
color:silver;
text-decoration:underline;
}
/* Phone */
#phone p {
color: black ;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px ;
}
/* Heading's */
#heading h2 {
color: white;
}
Hi, Suppose I define a font-family with several fallbacks, for example: Code: font-family: "Georgia", "Liberation Serif", serif; Now I would like to know which font did the browser effectively pick without me having to go through my system looking for which fonts are installed. When I inspect the text with tools such as Firebug or the Web Developer Toolbar, they just give me the full font-family definition, but don't tell me the actual font being used... Thank you in advance! Jean ...And for once firefox is the problem! Well here it is part of the page in internet explorer first And here in firefox Why the overlap in firefox? Heres my css Code: body {
margin: 0px;
padding: 0px;
}
#header {
background-color: #9F0000;
width: 760px;
height: 150px;
margin-right: auto;
margin-left: auto;
z-index: 1;
background-image: url(../Graphics/png/headergradient.png);
background-repeat: repeat-x;
}
#NavDiv ul {
margin-top: 0px;
margin-bottom: 2px;
}
#MainContent table {
margin-right: auto;
margin-left: auto;
margin-top: 0px;
}
#NavDiv li {
list-style-type: none;
display: inline;
margin-right: 25px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
}
#NavDiv {
width: 760px;
background-color: #999999;
height: 25px;
margin-right: auto;
margin-left: auto;
z-index: 1;
padding-top: 5px;
padding-bottom: 5px;
}
.headertitle {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color: #000000;
}
#Footer p {
text-align: center;
}
#MainContent {
height: 600px;
width: 760px;
text-align: left;
margin-right: auto;
margin-left: auto;
background-color: #FFE784;
}
#MainContent p {
margin-left: 50px;
margin-right: 50px;
margin-top: -10px;
}
#Footer {
background-color: #9F0000;
height: 116px;
width: 760px;
visibility: visible;
background-image: url(../Graphics/png/headergradient.png);
background-repeat: repeat-x;
margin-right: auto;
margin-left: auto;
bottom: 0px;
position: static;
}
#header li {
color: #FFFFFF;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
#Footer p {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFFFFF;
}
#MainContent li {
list-style-image: url(../Graphics/png/glove.png);
margin-top: 1px;
}
And the page in question is http://bif.dmsbdesign.com/WWA.html Also anyone have the name of a good css book I can pick up? Fixed. Im trying to do some CSS frame emulation for a curve on my site so that it follows the screen, but (and this is a surprise, i feel) it only works in IE!! Not in firefox. Im not sure why. Here is the CSS file that holds the frame emulation: Code:
@media screen
{
body
{
margin: 0;
padding: 1em 1em 1em 14em;
color: #000;
background: #fff;
}
div.fixedBox
{
position: fixed;
top: 1em;
left: 1em;
width: 12em;
border: 1px solid #000;
background: #eee;
}
div.fixedBox p
{
margin: 1em;
}
/* Don't do this at home */
* html
{
overflow-y: hidden;
}
* html body
{
overflow-y: auto;
height: 100%;
padding: 0 1em 0 14em;
font-size: 100%;
}
* html div.fixedBox
{
position: absolute;
}
/* All done. */
}
Is there an error here? I got this off here. Not sure what is going wrong, like i said it work in IE, but not firefox, whereas the example on the above site works in both. Any ideas? I'm pretty new to CSS and still learning the basics. Recently I am redesigning my website. The new layout looks good on my browser and even on my laptop's browser which has a smaller resolution. However when the browser is re-sized to half a screen or smaller or when I look at it on my blackberry the right column moves down. I'm not sure how to fix that. Any ideas? The webpage in question is Here and I am using this CSS file Code:
body {
font-family: Arial, Helvetica, sans-serif;
color: #8a2d2c;
font-size: 12px;
padding: 0; margin: 0;
background: #ed864b;
}
#wrapper {
width: 100%;
height: 850;
margin: 0 auto;
background: url('images/background2a_halloween.jpg') no-repeat bottom left;
background-color: #ed864b;
}
/* Begin Parent Left Column --------------------------------------------------------------------- */
#leftcolumn {
padding: 10px;
display: inline;
float: left;
}
#leftcolumn .logo {
margin: 0px 0px 10px 0px;
width: 252px;
}
#leftcolumn .logo img { display: block; }
#leftcolumn .leftbox2 { /* Generic Box */
margin: 0px 0px 10px 0px;
}
/* Begin Navigation Bar left */
#leftcolumn ul.mainnav {
margin: 0px;
padding: 0;
background-color: #000000;
list-style: none;
}
#leftcolumn ul.mainnav .heading {
background-color: #d9743b;
padding: 5px;
color: #000000;
font-size: 14px;
border-top: 1px solid #000000;
}
#leftcolumn ul.mainnav li {
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
}
#leftcolumn ul.mainnav li a:link, #leftcolumn ul.mainnav li a:visited{
color: #ed864b;
background-color: #000000;
font-size: 12px;
text-decoration: none;
padding: 5px;
display: block;
}
#leftcolumn ul.mainnav li a:hover{
display: block;
font-size: 12px;
background-color: #000000;
text-decoration: blink;
padding: 5px;
}
/* End Left Navigation */
/* End Parent Left Column ----------------------------------------------------------------------- */
/* Begin Parent Right Column ----------------------------------------------------------------------- */
#rightcolumn {
border-left: 2px solid #000000;
margin: 0 10 0 10px;
display: inline; /* IE Fix */
width:750px;
float: left;
}
#rightcolumn p.content {
float: center;
border-top: 2px dashed #000000;
margin: 20px 0px 0px 0px;
padding-left:20px;
padding-top:20px;
}
#rightcolumn p.content img {
float: center;
border: 1px solid #000000;
margin: 5px 10px 10px 5px;
}
#rightcolumn h1 {
margin: 10px;
padding: 3px 10px;
border: 1px solid #000000;
font-size: 24px;
background: #ed864b;
}
#rightcolumn .banner {
margin: 0px;
background-color: #ed864b;
}
#rightcolumn .banner img { display: block; }
/* End Parent Right Column ----------------------------------------------------------------------- */
.clear {
clear: left;
Any help would be greatly appreciated. Hey, I got this simple code. In mozila firefox it looks good but in explorer appears a white area. that's not suppose to be there. please help me fix it! <html> <head> <style type="text/css"> body{ margin:0; padding:0; } div.header{ width:774px; border:1px solid; border-bottom:none; } div.main{ width:774px; border-left:1px solid; border-right:1px solid; } div.footer{ width:774px; border:1px solid; border-top:none; } </style> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <div class="header"><img src="images/bovenbalk3.gif" width="774"></div> <div class="main"></div> <div class="footer"><img src="images/onder.gif" width="774"></div> <body> </body> </html> |
|||||||