Learn VBA & Macros in 1 Week!

CSS - Having Css Issues Between The Pc & Mac Versions On The Same Browser, Please Help

Full Excel VBA Course - Beginner to Expert

Having Css Issues Between The Pc & Mac Versions On The Same Browser, Please Help	View Content

Full Excel VBA Course - Beginner to Expert

Can A Smart Guy/girl Help With Browser To Browser Translation Issues?

Similar Tutorials

View Content

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;}

Browser Issues - Can U Help?

Similar Tutorials

View Content

Hi, I have written a site for a client:

waihekemagicmassage .com

The css file is magic.css

The site works fine on IE7, FF 2, NN and Opera.

For some reason, the vertical scroll bar on IE6 does not exist. Can anyone help tell me why?

Also, how can I test this for compatibility on other browsers / mac for example.

Thanks in advance.
Sol

Css - Browser Compatibility Issues

Similar Tutorials

View Content

Hello, newbie he

I'm helping a friend redesign his website, and I'm having a few problems regarding the look across different browsers. I'm kinda new to CSS, so any help would be awesome!

http://www.manplusrocks.com/MAVIN/template.html
http://www.manplusrocks.com/MAVIN/css/mavin.css

The site looks just fine on IE 6.0 (except for a little gap that the Javascript leaves on the top image), and other browsers seem to be ignoring certain DIV tags. I don't know if they are ID'd incorrectly or if it's another issue...

Any comments would be greatly appreciated, thanks!

Cross Browser Nav Bar Issues

Similar Tutorials

View Content

On this site http://www.freewaytransmissions.com I am having issues with the spacing on the navigation. The nav is an ul and I used inline css for spacing the links apart, but as you see in Chrome they are spaced correctly, but in IE they are not aligned correctly. If someone can shed some light I'd appreciate it. Thanks. Tom

Please Help With Cross Browser Issues

Similar Tutorials

View Content

Hi there, I am reposting this question after removing the extraneous items from the site. Basically, I can get things to line up in either IE or FF, but not both, I have managed to solve this with past sites, but can't seem to figure this one out! Currently I have it set so it is correctly displayed in IE:

http://www.kohlrbaby.com/vcc/portfolio/portfolio.htm

Please, please help me to figure out how to do fixes for this issue, I have been searching online but can't seem to figure it out and am very frustrated!
Thanks so much and here is my CSS:

body {
margin: 0px 0px 30px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, arial, helvetica, sans-serif;
color: #000000;
background-color: #999999;
text-align: center;

}
#title{
margin-top:0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left:0px;
position: relative;
float: left;
clear: left;

}
#rightBox {
border-right: 2px solid #666666;
width:625px;
padding: 0px;
border-top: 2px solid #666666;
border-bottom: 2px solid #666666;
border-left: 2px solid #666666;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left:0px;
background: #ffffff;

}
.mainPic {
margin-top: -475px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 30px;
position:relative;
float: left;
clear: left;
z-index: 100;
}

img.pic{
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;

}
PS: i know I don't need to have all my margin positions shown (ie: may eventually become margin: 0px), however I have kept it like this until I figure out what my problems are.

Browser Font Issues / Import Css

Similar Tutorials

View Content

I'm having a bit of trouble getting my font to align itself in the middle of a DIV (as it has a background). In FireFox it looks fine, in the middle of the div. But in Netscape and IE it is at the very top of the div (in Netscape) and really high (in IE). Usually I would just add padding-top to the div to position the text in the center, although this then knocks out FireFox.

Not sure the best way to solve this?

Would I have to import a different CSS file for the browers? I guess this would be best so I can target the little issues with each. How would I do this and make the browers know which is which?

Thanks

Cross Browser Alignment Issues

Similar Tutorials

View Content

Hello all,
I have a really anoying alignment issues with fire fox and IE.
Have a look at the follwoing page in both browsers:
http://pfwd.org.uk/style.htm

I need to get IE to display what Firefox shows.
The four rows on the left hand side (date, date value, number and number value) need to be aligned with the rows Descirption and description value.
Please note not all style code is in the external stylesheet

external CSS file:

PHP Code:
body{
    background-color:#006699;
    font-family:Arial, Helvetica, sans-serif;
}

.main, header, subHeader{/*Positon values that make every thing go inside the main box */
    position:absolute;
    left:100px;
}
.main, subHeader dbItem{
    border: solid 1px #0099CC;

}
.main, header{
    top:125px;
    left:140px;
    width:451px;
    }

.main{
    height:300px;
}
.header{
    background-color:#0099CC;
    font-size:12px;
    font-weight:800;
}
.subHeader{
    height:22px;
    width:200px;
    border: solid 1px #0099CC;
    background-color:#FFCC66;
    float: left;
    font-size:10px;
    font-weight:700;
    padding: 2px;
}
.dbHeader{
    border: solid 1px #0099CC;
    background-color:#FFCC66;
    font-size:10px;
    font-weight:600;
    padding: 2px;
    width: 50px;
}
.dbItem{
    background-color:#FFFFFF;
    border: solid 1px #0099CC;
    font-size:10px;
    font-weight:700;
    padding: 2px;
    width:50px;
}
.dbdescripHeader{
    border: solid 1px #0099CC;
    background-color:#FFCC66;
    font-size:10px;
    font-weight:600;
    padding: 2px;
    width: 364px;
    float:right;
}
.dbdescripItem{
    background-color:#FFFFFF;
    border: solid 1px #0099CC;
    font-size:10px;
    font-weight:700;
    padding: 2px;
    width:50px;
    width: 390px;
    float:right;
    height:48px;
}
.link{
    font-size:11px;
    font-weight:700;
    font-family:Arial, Helvetica, sans-serif;
    padding:2px;
    color:#0099CC;
    text-decoration:none;
    float:right;
}
.links{
    background-color:#006699;
    border: 1px solid #0099CC;
    border-top:1px solid #0099CC;
    color:#0099CC;
    text-decoration:none;
    padding:0 2px;
    }
.link a:hover{
    font-size:11px;
    font-weight:700;
    font-family:Arial, Helvetica, sans-serif;
    padding:0 2px;
    text-decoration:none;
    color:#FFCC66;
    background-color:#006699;
}
br{
    margin-top:-15px;
}

.subsubheader{
    border: solid 1px #0099CC;
    background-color:#FFCC66;
    float: left;
    font-size:10px;
    font-weight:700;
    padding: 2px;
    }

page file:

PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>

    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="style.css"type="text/css" />
  </head>
  <body>
<div class='main'>
    <div class='header'>Updates to the site</div>
<div style='margin-bottom:20px;'>
    <div class='subHeader' style='height:22px;'>Search for an update</div>
    <div class='dbItem' style='left:180px;  width: 239px; float:left; height:22px;'>
      <form name="search" method="post" action="post">
        <select name="Year">
            <option>Year</option>
            <option>2005</option>
            <option>2004</option>
            <option>2003</option>
            <option>2002</option>
            <option>2001</option>
            <option>2000</option>
        </select>
        <select name="Month">
            <option>Month</option>
            <option>January</option>
            <option>Febuary</option>
            <option>March</option>
            <option>April</option>
            <option>May</option>
            <option>June</option>
            <option>July</option>
            <option>August</option>
            <option>September</option>
        </select>
        <input type="submit" name="Submit" value="Search" />
      </form>
    </div>
</div>
            <div style='margin-bottom:10px;'>
                <div class="link"><a href='#' class='links'>GO</a></div>
                  <div class='dbdescripHeader'>Description of update</div>
                  <div class='dbdescripItem'>First set of information from the database</div>
                    <div class='dbHeader'>Number</div>
                    <div class='dbItem'>one</div>
                    <div class='dbHeader'>Date</div>
                    <div class='dbItem'>10/01/01</div>
                </div>

            <div style='margin-bottom:10px;'>
                  <div class="link"><a href='#' class='links'>GO</a></div>
                  <div class='dbdescripHeader'>Description of update</div>
                  <div class='dbdescripItem' >Second set of information from the database</div>
                      <div class='dbHeader'>Number</div>
                    <div class='dbItem'>two</div>
                    <div class='dbHeader'>Date</div>
                    <div class='dbItem' >10/01/01</div>
            </div>

            <div style='margin-bottom:10px;'>
                  <div class="link"><a href='#' class='links'>GO</a></div>
                  <div class='dbdescripHeader'>Description of update</div>
                  <div class='dbdescripItem'>third set of infroamtion from the database</div>
                      <div class='dbHeader'>Number</div>
                    <div class='dbItem'>three</div>
                    <div class='dbHeader'>Date</div>
                    <div class='dbItem'>10/01/01</div>
            </div>

    
</div>
</body>
</html>

URLS
css: http://pfwd.org.uk/style.css
page: http://pfwd.org.uk/style/htm

Can any one help me sus out the alignment issues?
thanks
pfwd

Cross-browser Issues With Css Design

Similar Tutorials

View Content

I 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 &nbsp; N<br>
				N &nbsp; N<br>
				N &nbsp; N<br>
				N &nbsp; N<br>
				N &nbsp; N<br>
				N &nbsp; N<br>
				N &nbsp; N<br>
				N &nbsp; N<br>
				N &nbsp; N<br>
				N &nbsp; N<br>
				N &nbsp; N<br>
				N &nbsp; N<br>
				N &nbsp; N<br></span>
			</div>
		</div>		
	</div>
	
</body>
</html>

Fieldset, Are There Cross-browser Issues? Also Is There An Ie Fix For Background Css?

Similar Tutorials

View Content

i really like the fieldset due to having the title in the middle of the border, but are there any cross-browser issues?
also what i'm finding is that if i set background styling.
IE sets the background colour to include the legend aswell, whereas Firefox sets the background colour to the confines of the border.

Ideas welcome and asked for
Effective Alternatives also welcomed

Horizontal Nav - Cross Browser / Platform Issues

Similar Tutorials

View Content

HTML
Code:

<div id="nav">
		<ul> 
			<li class="first"><a title="#" href="#">About Company</a></li>
			<li><a title="#" href="#">RRR News</a></li> 
			<li><a title="#" href="#">Apartment Communities</a></li>
			<li><a title="#" href="#">Commercial Properties</a></li>
			<li><a title="#" href="#">Current Developments</a></li>

			<li class="last"><a title="#" href="#">Resident Login</a></li>
		</ul>
	</div>

CSS
Code:

 /*** Main Navigation Styling ***/
#nav {
	border-top: 1px solid #897409;
	border-bottom: 1px solid #897409;
	background:#fff url(../images/nav_off_back.jpg) repeat-x center;
	height: 29px;	
}
#nav ul{
	font-size: 17px;
	margin:0;
	float:left;
	text-align:center;
	width:100%;

}
#nav li {
	display:inline;
	margin:0;
	float:left;
	list-style: none;
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	min-height: 27px;
	height: 27px;
	line-height:27px;
	padding:1px 0;
}
#nav li.first {
	background:url(../images/nav_bars.gif) left center no-repeat;
	padding-left:2px;
	_margin-left:24px;
	
}
#nav li.first a,
#nav li.first a:link{
	border-left:0;
	
}

#nav li.last {
	border-right:1px solid #fff;
}

#nav li a {
	color: #000;
	text-decoration: none;
	text-align:center;
	min-height: 27px;
	height:27px;
	padding:6px 17px 6px 17px;
	border-right:1px solid #b49f36;
	border-left:1px solid #fff;
}

#nav li a:hover {
	text-align:center;
	background: url(../images/nav_on_back.jpg) repeat-y center;
	color:#fff;
	min-height:27px;
	height: 27px;
	padding:6px 17px 6px 17px;
}

This code produces a centered horizontal navigation menu in FireFox Mac and IE6 PC. However, in FireFox PC the whole menu is shifted a bit to the right off-center (about 15 px). In IE7 PC, the menu sits on the left and is not centered at all.

I am willing to use a browser sniffer to fix the IE7 problem, but I'm not sure what to do for Firefox. The PC and Mac versions of Firefox usually play nice, but not this time. I'd rather not use both a platform AND browser sniffer, but I'm running out of ideas. The addition of a pixel-specific line-height for #nav li { helped some earlier issues, but did not fix them all.

Problem With Css In Older Ie Versions

Similar Tutorials

View Content

I run http://www.licklinux.com and the site has been designed to fit most browsers. Such as Gecko (e.g. Firefox), IE, Opera, even Lynx e.t.c.

Though in older versions of IE, the sidebar has an awfully ugly blank right-margin. I can't seem to fix this problem, and by viewing my stats 17% use these non-compatible browsers. Can someone please help me? I usually figure CSS problems out myself, but now I'm totally lost...

Footer Takes Up 1/3 Of The Screen In Some Versions Of Ie8

Similar Tutorials

View Content

Hello all,
just when I thought IE6 and all its quirks was behind us I am faced with a very strange issue that can only be replicated in one version of IE8 that a client has... You'll find attached a layout with header, middle content area that stretches to fill remaining space (and has a background image that uses JQuery bgstretcher to fill its background with an image), and a footer that just stays at the bottom in IE7, IE8 and FF. Problem is, that in a client's PC with Explorer 8 that same footer is not a small stripe but it goes way up into the content area and takes up 1/3 of the screen space at the bottom. I can't replicate this in any of my IE7s or IE8s I looked around and I'm going mad. Is there something in the CSS that I could maybe take out or change or does someone know of any IE8 bug? Thanks.

All html + css is here (208K pls remove gaps to get link):
www . sendspace . com / file / ool8zx

Install Multiple Versions Of Ie For Testing Purposes...

Similar Tutorials

View Content

In case you guys didn't know about this, you can have multiple versions of IE, back to IE3, running simultaneously on your machine (for testing out your web work).

Here's the link:
http://tredosoft.com/Multiple_IE

I just have IE5 through IE7 installed as there's no way I'm developing for 4 and below. Heck, I pretty much just test in IE6 and up.

Hope this helps.

Please Help - Website Not Displaying Correctly On Older Versions Of Ie

Similar Tutorials

View Content

I just finished modifying an open CSS/XHTML webpage and it displays perfectly on IE7.

When the page is viewed on other IE versions, it is completely jumbled (i.e. footer at top of page, hover boxes on navigation bar take up whole screen, borders exceed defined 1000px, etc.)

I am a novice at CSS and am having difficulty fixing these issues. Any help would be greatly appreciated.

I'v attached screen shots of the correct and incorrect layouts.

I have 2 css formatting files: setup and text

Here's SETUP.CSS:

/* NON-HEADER */
*{padding:0; margin:0;}
body {font-size:62.5%; background:rgb(250,250,250) url(../img/bg_sides.gif); font-family:Verdana,arial,sans-serif; margin-bottom:40px} /*Font-size: 1.0em = 10px when browser default size is 16px*/
.page-container {width:1000px; margin:0px auto; margin-bottom:25px; font-size:1.0em;}
.page-footer {width:1000px; margin:0px auto; margin-top:20px; margin-bottom:10px; font-size:1.0em; text-align:center;}
.main {clear:both; width:1000px; padding-bottom:30px; background:rgb(255,255,255); top left repeat-y;}
.main-navigation {display:inline /*Fix IE floating margin bug*/; float:left; width:200px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
.main-content {display:inline; /*Fix IE floating margin bug*/; float:left; width:940px; margin:30px 0 0 30px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
.footer {clear:both; width:1000px; padding:1.0em 0 1.0em 0; background:transparent; font-size:1.0em; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}

/* --- For alternative headers START PASTE here --- */

/* HEADER */
.header {width:1000px; font-family:"TREBUCHET MS",arial,sans-serif;}
.header-top {width:1000px; height:100px; background:rgb(195,0,0); overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
.header-middle {width:1000px; height:30px; background:transparent; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
.header-bottom {width:1000px; height:300px; background:rgb(204,0,0) repeat-y;}
.header-breadcrumbs {clear:both; width:1000px; padding:1.0em 0 1.5em 0; background:rgb(255,255,255) url(../img/bg_head_breadcrumbs.jpg) repeat-y;}

/*******************/
/* HEADER SECTION */
/*******************/
.sitelogo {width:400px; height:100px; position:absolute; z-index:1; background:url(../img/header-logo.jpg); }
.sitepic {width:1000px; height:300px; position:absolute; z-index:1; background:url(../img/header-logo.jpg); }.sitename {width:300px; height:45px; position:absolute; z-index:1; margin:20px 0 0 90px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
.sitename h1 {font-size: ;}
.sitename h2 {margin:-4px 0 0 0; color:rgb(125,125,125); font-size:120%;}
.sitename a {text-decoration:none; color:rgb(125,125,125);}
.sitename a:hover {text-decoration:none; color:rgb(50,50,50);}

.nav0 {width:350px; position:absolute; z-index:2; margin:25px 0 0 0; margin-left:550px !important /*Non-IE6*/; margin-left:553px /*IE6*/;}
.nav0 ul {float:right; padding:0 20px 0 0;}
.nav0 li {display:inline; list-style:none;}
.nav0 li a {padding:0 0 0 3px;}
.nav0 a:hover {text-decoration:none;}
.nav0 a img {height:14px; border:none;}

.nav1 {width:350px; position:absolute; z-index:3; margin:10px 0 0 650px;}
.nav1 ul {float:right; padding:0 15px 0 0; font-weight:bold;}
.nav1 li {display:inline; list-style:none;}
.nav1 li a {display:block; float:left; padding:2px 5px 2px 5px; color:rgb(255,255,255); text-decoration:none; font-size:100%;}
.nav1 a:hover {text-decoration:none; color:rgb(145,145,145);}

.sitemessage {width:400px; height:120px; position:absolute; z-index:1; margin:30px 0 0 480px; color:rgb(234,239,247); /*overflow:visible !important /*Activate if Firefox print problems*/; overflow:hidden /*IE6*/;}
.sitemessage h1 {width:400px; text-align:right; font-size:230%;}
.sitemessage h2 {float:right; width:320px; margin:8px 0 0 0; text-align:right; line-height:100%; font-size:160%;}
.sitemessage h3 {float:right; width:320px; margin:10px 0 0 0; text-align:right; font-size:140%;}
.sitemessage h3 a {text-decoration:none; color:rgb(234,239,247);}
.sitemessage h3 a:hover {text-decoration:none; color:rgb(50,50,50);}

/*Drop-down menu*/
.nav2 {float:left; width:1000px; border:none; background:transparent url(../img/nav-bar-main.jpg) no-repeat; color:rgb(255,255,255); font-size:110%;} /*Color navigation bar normal mode*/
.nav2 ul {list-style-type:none;}
.nav2 ul li {float:left; position:relative; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; }
.nav2 ul li a {float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:30px; line-height:30px; padding:0 16px 0 16px; text-decoration:none; font-weight:bold; color:rgb(255,255,255);}
.nav2 ul li ul {display:none; border:none;}

/*Non-IE6 hovering*/
.nav2 ul li:hover a {background-color:rgb(210,210,210); border: solid 1px rgb(130,130,130); text-decoration:none; color:rgb(80,80,80);} /*Color main cells hovering mode*/
.nav2 ul li:hover ul {display:block; width:140px; position:absolute; z-index:999;}
.nav2 ul li:hover ul li a {display:block; width:140px; height:auto; line-height:1.3em; padding:4px 16px 4px 16px; margin-top:-2px; border-left:solid 1px rgb(130,130,130); border-bottom: solid 1px rgb(130,130,130); background-color:rgb(210,210,210); font-weight:bold; color:rgb(80,80,80);} /*Color subcells normal mode*/
.nav2 ul li:hover ul li a:hover {background-color:rgb(204,0,0); text-decoration:none; color:rgb(255,255,255);} /*Color subcells hovering mode*/

/*IE6 hovering*/
.nav2 table {position:absolute; top:0; left:0; border-collapse:collapse;}
.nav2 ul li a:hover {background-color:rgb(210,210,210); text-decoration:none; border: solid 1px rgb(130,130,130); color:rgb(80,80,80);} /*Color main cells hovering mode*/
.nav2 ul li a:hover ul {display:block; width:140px; position:absolute; z-index:999;}
.nav2 ul li a:hover ul li a {display:block; width:140px; height:auto; line-height:1.3em; padding:4px 16px 4px 16px; margin-top:-2px; border-left:solid 1px rgb(130,130,130); border-bottom: solid 1px rgb(130,130,130); background-color:rgb(210,210,210); font-weight:bold; color:rgb(80,80,80);} /*Color subcells normal mode*/
.nav2 ul li a:hover ul li a:hover {background-color:rgb(204,0,0); text-decoration:none; color:rgb(255,255,255);} /*Color subcells hovering mode*/

.header-top .searchform {float:right; width:285px; padding:0 17px 0px 0px !important /*Non-IE6*/; padding:0 12px 0px 0px /*IE6*/;}
.header-top .searchform form fieldset {float:right; border:none;}
.header-top .searchform input.field {width:10.0em; padding:0.2em 0 0.2em 0; font-family:verdana,arial,sans-serif; font-size:120%; }
.header-top .searchform input.button {width:3.0em; padding:1px !important /*Non-IE6*/; padding:0 /*IE6*/; background:transparent url(../img/search-button.gif); text-align:center; font-family:verdana,arial,sans-serif; color:rgb(150,150,150); font-size:120%;}
.header-top .searchform input.button:hover {cursorointer; background:transparent url(../img/search-button.gif);}

/******************/
/* MAIN SECTION */
/******************/

/* MAIN CONTENT */
.column1-unit {width:950px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;}
.column2-unit-left {float:left; width:600px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;}
.column2-unit-right {float:right; width:300px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;}
.column3-unit-left {float:left; width:283px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;}
.column3-unit-middle {float:left; width:283px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/; margin-left:50px;}
.column3-unit-right {float:right; width:283px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;}

/********************/
/* FOOTER SECTION */
/********************/
.footer p {line-height:1.3em; text-align:center; color:rgb(125,125,125); font-weight:bold; font-size:110%;}
.footer p.credits {font-weight:normal;}
.footer a {text-decoration:underline; color:rgb(125,125,125);}
.footer a:hover {text-decoration:none; color:rgb(0,0,0);}
.footer a:visited {color:rgb(0,0,0);}

/******************/
/* CLEAR FLOATS */
/******************/
.page-container:after, .header:after, .header-breadcrumbs:after, .main:after, .main-content:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.column1-unit:after, .column2-unit-left:after, .column2-unit-right:after, .column3-unit-left:after, .column3-unit-middle:after, .column3-unit-right:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.footer:after, p:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clear-contentunit {clear:both; width:940px; height:0.1em; border:none; background:rgb(210,210,210); color:rgb(210,210,210);}

Here's TEXT.CSS:

/******************/
/* MAIN SECTION */
/******************/

/* MAIN CONTENT */
.main-content h1.pagetitle {margin:0 0 0.4em 0; padding:0 0 2px 0; border-bottom:solid 7px rgb(225,225,225); font-family:"georgia",arial,sans-serif; color:rgb(100,100,100); font-weight:bold; font-size:220%;}
.main-content h1.block {clear:both; margin:1.0em 0 0em 0; padding:2px 0 2px 2px; background:rgb(190,190,190); font-family:"georgia",arial,sans-serif; color:rgb(255,255,255); font-weight:bold; font-size:220%;}
.main-content h1 {clear:both; margin:1.0em 0 0.5em 0; font-family:"georgia",arial,sans-serif; color:rgb(80,80,80); font-weight:normal; font-size:210%;}
.main-content h2 {clear:both; margin:1.0em 0 0.5em 0; font-family:"Verdana",arial,sans-serif; color:rgb(80,80,80); font-weight:normal; font-size:170%;}
.main-content h3 {clear:both; margin:-.5em 0 0.5em 0; font-family:"Verdana",arial,sans-serif; color:rgb(125,125,125); font-weight:normal; font-size:130%;}
.main-content h1.side {clear:none;}
.main-content h2.side {clear:none;}
.main-content h3.side {clear:none;}

.main-content h4 {margin:1.5em 0 1.0em 0; color:rgb(80,80,80); font-family:"Verdana",arial,sans-serif; font-weight:normal; font-size:170%;}
.main-content h5 {margin:1.5em 0 1.0em 0; color:rgb(80,80,80); font-family:"Verdana",arial,sans-serif; font-size:140%;}
.main-content h6 {clear:both; margin:0 0 .25em 0; line-height:1em; font-family:"Verdana",arial,sans-serif; font-weight:normal; font-size:100%;}
.main-content p {margin:0 0 1.0em 0; line-height:1.5em; font-size:120%;}
.main-content p.center {text-align:center;}
.main-content p.right {text-align:right; margin-right: 10px}
.main-content p.details {clear:both; margin:-0.25em 0 1.0em 0; line-height:1.0em; font-size:110%;}
.main-content blockquote {clear:both; margin:0 30px 0.6em 30px; font-size:90%;}

.main-content table {clear:both; width:880px; margin:2.0em 0 0.2em 20px; table-layout: fixed; border-collapse:collapse; empty-cells:show; background-color:rgb(233,232,244);}
.main-content table th.top {height:3.5em; padding:0 7px 0 7px; empty-cells:show; background-color:rgb(175,175,175); text-align:left; color:rgb(255,255,255); font-weight:bold; font-size:110%;}
.main-content table th {height:3.0em; padding:2px 20px 2px 7px; border-left:solid 2px rgb(255,255,255); border-right:solid 2px rgb(255,255,255); border-top:solid 2px rgb(255,255,255); border-bottom:solid 2px rgb(255,255,255); background-color:rgb(225,225,225); text-align:left; color:rgb(80,80,80); font-weight:bold; font-size:110%;}
.main-content table td {height:3.0em; padding:2px 7px 2px 7px; border-left:solid 2px rgb(255,255,255); border-right:solid 2px rgb(255,255,255); border-top:solid 2px rgb(255,255,255); border-bottom:solid 2px rgb(255,255,255); background-color:rgb(225,225,225); text-align:left; font-weight:normal; color:rgb(80,80,80); font-size:110%;}
p.caption {clear:both; margin:0.5em 0 2.0em 20px; text-align:left; color:rgb(80,80,80); font-size:110%;}

.main-content ul {list-style:none; margin:0.5em 0 1.0em 0;}
.main-content ul li {margin:0 0 0.2em 2px; padding:0 0 0 12px; background:url(../img/bg_bullet_full_1.gif) no-repeat 0 0.5em; line-height:1.4em; font-size:120%;}
.main-content ol {margin:0.5em 0 1.0em 30px !important /*Non-IE6*/; margin:0.5em 0 1.0em 35px /*IE6*/;}
.main-content ol li {list-style-positionutside; margin:0 0 0.2em 0; line-height:1.4em; font-size:120%;}

.contactform {width:418px; margin:2.0em 0 0 0; padding:10px 10px 0 10px; border:solid 1px rgb(200,200,200); background-color:rgb(240,240,240);}
.contactform fieldset {padding:20px 0 0 0 !important /*Non-IE6*/; padding:0 /*IE6*/; margin:0 0 20px 0; border:solid 1px rgb(220,220,220);}
.contactform fieldset legend {margin:0 0 0 5px !important /*Non-IE*/; margin:0 0 20px 5px /*IE6*/; padding:0 2px 0 2px; color:rgb(80,80,80); font-weight:bold; font-size:130%;}
.contactform label.left {float:left; width:100px; margin:0 0 0 10px; padding:2px; font-size:110%;}
.contactform select.combo {width:175px; padding:2px; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;}
.contactform input.field {width:275px; padding:2px; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;}
.contactform textarea {width:275px; padding:2px; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;}
.contactform input.button {float:right; width:9.0em; margin-right:20px; padding:1px !important /*Non-IE6*/; padding:0 /*IE6*/; background:rgb(230,230,230); border:solid 1px rgb(150,150,150); text-align:center; font-family:verdana,arial,sans-serif; color:rgb(150,150,150); font-size:110%;}
.contactform input.button:hover {cursor: pointer; border:solid 1px rgb(80,80,80); background:rgb(220,220,220); color:rgb(80,80,80);}

.loginform {width:160px; margin:-10px 20px 0 20px;}
.loginform p {clear:both; margin:0; padding:0;}
.loginform fieldset {width:160px; border:none;}
.loginform label.top {float:left; width:125px; margin:0 0 2px 0; font-size:110%;}
.loginform label.right {float:left; width:125px; margin:5px 0 0 0; padding:0 0 0 3px; /*IE6*/; font-size:110%;}
.loginform input.field {width:158px; margin:0 0 5px 0; padding:0.1em 0 0.2em 0 !important /*Non-IE6*/; padding:0.2em 0 0.3em 0 /*IE6*/; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;}
.loginform input.checkbox {float:left; margin:5px 0 0 0 !important /*Non-IE6*/; margin:2px 0 0 -3px /*IE6*/; border:none;}
.loginform input.button {float:left; width:5.0em; margin:10px 0 5px 0; padding:1px; background:rgb(230,230,230); border:solid 1px rgb(150,150,150); text-align:center; font-family:verdana,arial,sans-serif; color:rgb(150,150,150); font-size:110%;}
.loginform input.button:hover {cursorointer; border:solid 1px rgb(80,80,80); background:rgb(220,220,220); color:rgb(80,80,80);}

/********************/
/* COMMON CLASSES */
/********************/
.main img {clear:both; float:left; margin:3px 10px 7px 0; padding:1px; border:1px solid rgb(150,150,150);}
.main img.center {clear:both; float:none; display:block; margin:0 auto; padding:1px; border:1px solid rgb(150,150,150);}
.main img.right {clear:both; float:right; margin:3px 0 7px 10px; margin-right:10px; padding:1px; border:1px solid rgb(150,150,150);}

.main a {color:rgb(70,122,167); font-weight:bold; text-decoration:none;}
.main-content h1 a {color:rgb(70,122,167); font-weight:normal; text-decoration:none;}
.main a:hover {color:rgb(42,90,138); text-decoration:underline;}
.main a:visited {color:rgb(42,90,138);}

.main a img {border:solid 1px rgb(150,150,150);}
.main a:hover img {border:solid 1px rgb(220,220,220);}

Vertical Align/height Issues With Divs..(ie6 Issues, Of Course!!!)

Similar Tutorials

View Content

I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically??

Code:

<div style="height: 38px; margin: 0px; padding: 0px; width: 140px;">

<div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div>
<div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div>

</div>


<div style="height: 38px; margin: 0px; padding: 0px; width: 140px;">

<div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div>
<div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div>

</div>

Menu Bar Vertical Location Varies From Browser To Browser

Similar Tutorials

View Content

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.

Issues With Css When Zooming / Issues With Ssi.php In Smf Forums

Similar Tutorials

View Content

Hey,

I came across this forum and hopefully somebody can help me.

Here is my website: http://www.jmuelectricmotorcycle.tk

When the page is in firefox, If you page zoom out, the navbar goes under the content instead of staying on the right. I think it has something to do with padding and the sidebar not having enough room so it drops down. When I set the content to 1005 instead of 1000, it works, but there's a giant 5 pixel gap between my side bar and my content container.

Also, does anybody know how to style called data from ssi.php in SMF forums? I want my login boxes to look like my main page.

Thanks. Here is my css:

Code:

html {
	font: normal 12px verdana, arial;
        background-color: #000
}

body {
text-align: center
}

#fw-container {
margin: 0 auto;
width: 1000px;
text-align: left
}

.hasSidebar #fw-container {
	width: 1000px;
}

a, 
a:visited {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* --- Header --- */

#fw-head {
	position: relative;
	height: 196px;
	background: #242424;
}

#fw-title {
	font: bold 26px verdana;
	letter-spacing: -1px;
	position: absolute;
	top: 20px;
	left: 20px;
	padding: 0;
	margin: 0;
	z-index: 10;
}

#fw-title a, 
#fw-title a:visited, 
#fw-title a:hover {
	color: #fff;
}

.fw-logo {
	width: 760px;
	height: 196px;
	position: absolute;
}

.hasSidebar .fw-logo {
	width: 1000px;
}

/* --- Navigation --- */

#fw-mainnavwrap {
	background: #242424;
	padding: 10px 20px;
	font-family: arial;
	font-weight: normal;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

#fw-mainnavwrap ul {
	margin: 0;
	padding: 0;
	background: transparent;
	list-style-type: none;
}

#fw-mainnavwrap li {
	margin: 0px 15px 0px 0px;
	display: inline;
}

/* --- Content --- */


#fw-bigcontain {
	width: 760px;
	float: left;
}

.fw-paragraph {
	background: #242424 url('../Waveform/img/bg-p.gif') repeat-x top left;
	border-bottom: 1px solid #000;
	padding: 15px 20px 10px;
	overflow: hidden;
}

.fw-title {
	margin: 0px 0px 10px;
	font: 18px verdana;
	color: #fff;
}

.fw-text {
	margin-bottom: 10px;
}

/* --- Sidebar stuff --- */

.hasSidebar #fw-sidebar {
	width: 239px;
	float: right;
	font-size: 12px;
	clear: right;
	border-left: 1px solid #000;
}

#fw-sidebar .fw-title a,
#fw-sidebar .fw-title a:visited,
#fw-sidebar .fw-title a:hover {
	color: #fff;
	text-decoration: none;
}

#fw-sidebar .fw-title {
	font-size: 1.3em;
	font-weight: normal;
}

/* --- Footer --- */


#fw-footer {	
	font: normal 10px verdana, sans-serif;
	background: #242424;
	margin: 0px;
	padding: 11px 0px 1px;
	color: #999;
	clear: both;
	width: 760px;
}

.fw-footertext {
	background: #161616;
	border-bottom: 1px solid #000;
	border-top: 1px solid #000;
	margin: 0px;
	padding: 6px 0px 6px 20px;
}

Ie Issues... :s

Similar Tutorials

View Content

Ok so i made a site that validates in w3c check and shows ok on all browsers save for IE. Im really not sure where to begin on debugging it! http://new.mostardesigns.com/

Any help is much appreciated!

Need Help With Few Issues

Similar Tutorials

View Content

hello all,
I am stuck on few things here. I want to make the following changes and I tried fixing them several times but could not succeed.

1. quantity input align right at the center.
2. remove button v-align at the bottom of the total1 div tag, centered.
4. subtotal text positioned on same vertical line with Qty.
3. update button position 50px left side of subtotal text.

I'd appreciate any help I could get. If you think my css is sloppy please advise, I am open to make any changes, its better late than wrong.

http://www.refinethetaste.com/html/content/basket/basket.htm

Code:

<style>
/*basket*/
#basket	{ width:576px; float:left; margin-left:2px; }
#basket .basket	{ float: left; width: 574px; margin: 10px 0; border: #ece7d1 1px solid;}
#basket h1	{ height:30px; font-size: 18px; color:#716759; line-height:30px;}
#basket .basket .desc { float: left; width:274px; height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;  }
#basket .basket .weight	{ float: left; width:60px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#basket .basket .price	{ float: left; width:60px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#basket .basket .qty	{ float: left; width:60px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#basket .basket .total	{ float: left; width:60px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#basket .basket .desc1 { float: left; width:274px; height:80px; margin:3px; padding:3px;  }
#basket .basket .weight1	{ float: left; width:60px; height:80px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;  }
#basket .basket .price1	{ float: left; width:60px; height:80px; text-align: center; color:#716759; margin:3px; padding:3px;  }
#basket .basket .qty1	{ float: left; width:60px; height:80px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;  }
#basket .basket .total1	{ float: left; width:60px; height:80px; text-align: center; font-weight:bold; font-size:14px; color:#716759; margin:3px; padding:3px;  }
#basket .basket .remove	{ float: left; width:574px; height:15px; border-bottom: #ece7d1 1px dotted;   }
#basket .basket .subtotal { float: left; width:504px; text-align:right; font-weight:bold; font-size:14px; border-right: #ece7d1 1px dotted; margin:10px 0 10px 0;   }
#basket .basket .subtotalint { float: left; width:60px; text-align:center; font-weight:bold; font-size:14px; border-bottom: #ece7d1 1px dotted; margin:10px 0 10px 0;}


#basket .hline {	border-bottom:5px solid #ece7d1; margin:10px 0 10px 0; padding:0; }

#signup form fieldset { margin: 10px 0; border: #ece7d1 1px solid; }
#signup form div label {  display: block;  float: left;  width: 120px;  padding: 5px; margin: 0 0 10px 0;  text-align: left;}
#signup form div.required label, label.required {  font-weight: bold; }
input.signupsubmit	{ float: right; border:0;}

#basket img#update { float:right; width: 48px; height: 15px; padding-right:150px; border: 0px; }
#basket img#remove { float:right; width: 52px; height: 15px; border: 0px; }
#basket img#contshopping { float:right;	width: 141px; height: 25px; padding-right:50px; border: 0px; }
#basket img#checkout { float:right;	width: 89px; height: 25px; border: 0px; }

#basket input.quantity { border:1px solid #716759; width:30px; text-align:right;	}

</style>
	<div id="basket">
        <h1>Create a New Account</h1>
        To take full advantage of your Williams-Sonoma account, please provide all the information below.
        <div class="hline"></div>
        <img alt="" src="http://www.refinethetaste.com/html/THEMES/default/images/checkout_step1.gif" /> 
    	<div class="basket">
            <div class="desc">Product Description</div>
            <div class="weight">Weight</div>
            <div class="price">Price</div>
            <div class="qty">Qty</div>
            <div class="total">Total</div>
            
              
			<form action="?Section=basket&Process=updatecart" method="post">          
                <div class="desc1">
                	<a href="default.asp?Section=product&PRODUCTID=13">Organic Fruit Harvest</a>
                    <br />
                    
                </div>
                <div class="weight1">2.5</div>
                <div class="price1">60</div>
                <div class="qty1"><input type='text' name='adet_13' onKeyup='if(this.value==0){this.value=1; this.select(); }' onclick='this.select();' maxlength='3' value='1' class="quantity"></div>
                <div class="total1">60</div>          
                <div class="remove"><a href="?Section=basket&Process=deletefromcart&PRODUCTID=13"><img alt="Remove" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_remove.gif" id="remove" /></a></div>
            </form>
              
			<form action="?Section=basket&Process=updatecart" method="post">          
                <div class="desc1">
                	<a href="default.asp?Section=product&PRODUCTID=15">Cornucopia</a>
                    <br />
                    
                </div>
                <div class="weight1">2</div>
                <div class="price1">60</div>
                <div class="qty1"><input type='text' name='adet_15' onKeyup='if(this.value==0){this.value=1; this.select(); }' onclick='this.select();' maxlength='3' value='1' class="quantity"></div>
                <div class="total1">60</div>          
                <div class="remove"><a href="?Section=basket&Process=deletefromcart&PRODUCTID=15"><img alt="Remove" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_remove.gif" id="remove" /></a></div>
            </form>
              
			<form action="?Section=basket&Process=updatecart" method="post">          
                <div class="desc1">
                	<a href="default.asp?Section=product&PRODUCTID=14">Organic Cider Celebration</a>
                    <br />
                    
                </div>
                <div class="weight1">1</div>
                <div class="price1">60</div>
                <div class="qty1"><input type='text' name='adet_14' onKeyup='if(this.value==0){this.value=1; this.select(); }' onclick='this.select();' maxlength='3' value='1' class="quantity"></div>
                <div class="total1">60</div>          
                <div class="remove"><a href="?Section=basket&Process=deletefromcart&PRODUCTID=14"><img alt="Remove" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_remove.gif" id="remove" /></a></div>
            </form>
          
			<div class="subtotal"><img alt="Update" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_update.gif" id="update" /> SubTotal</div>
			<div class="subtotalint">180</div>
            
        </div>



    <br />
    <a href="?Section=checkout"><img alt="Checkout" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_checkout.gif" id="checkout" /></a>
    <a href="http://www.refinethetaste.com/html"><img alt="Checkout" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_contshopping.gif" id="contshopping" /></a>
    </div>

Please Help Mac Issues

Similar Tutorials

View Content

Ok, this is my last chance at solving this problem.

I've created my site using CSS and XHTML, working fine in all the PC browsers I can find, but for some reason it is a different story on a Mac, especially IE.

It seems the left hand column of my site spreads across the full width, knocking the right frame down below it. I've looked and looked at my CSS code and I can't see what might be causing the problem.

My site is here, my CSS and XHTML is valid, although I have removed one CSS file due to problems so that is nothing to worry about.

If anyone can help, pref if you have a Mac, I would be so greatful.