|
CSS - Css Browser View ( Again )
grr.. i hate this thing... you know.. the different view in F/F and IE.. grrr i have this menu ( here ) when i view it in IE, its messed up.. but when i view it in F/F its not
Code:
/* -- Memu Css -- */
#navcontainer {
margin-left: 30px;
}
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;
}
#navcontainer li {
margin: 0;
}
#navcontainer a {
display: block;
padding: 5px 10px;
width: 130px;
color: #000;
background-color: #ADC1AD;
text-decoration: none;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-bottom: 1px solid #333;
border-right: 1px solid #333;
font-weight: bold;
font-size: .8em;
background-image: url(images/vertical06.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}
#navcontainer a:hover {
color: #000;
background-color: #889E88;
text-decoration: none;
border-top: 1px solid #333;
border-left: 1px solid #333;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
background-image: url(images/vertical06a.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}
#navcontainer ul ul li {
margin: 0;
}
#navcontainer ul ul a {
display: block;
padding: 5px 5px 5px 30px;
width: 130px;
color: #000;
background-color: #C5D8C5;
text-decoration: none;
font-weight: normal;
}
#navcontainer ul ul a:hover {
color: #000;
background-color: #889E88;
text-decoration: none;
}
any help? Similar TutorialsHi, I am using Dreamewaver CS4 and i noticed that when i view my page in live view or in the browser my background image doesnt show up. It does however in the split code/design view. Any help? Here is my Page Code 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>
<link href="styles.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-color: #96D0FF;
}
.thrColAbsHdr #container {
position: relative; /* adding position: relative allows you to position the two sidebars relative to this container */
width: 780px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px solid #000000;
text-align: center; /* this overrides the text-align: center on the body element. */
font-size: 11pt;
}
/* Tips for absolutely positioned sidebars with header and footer:
1. Absolutely positioned (AP) elements must be given a top and side value, either right or left. (As a default, if no top value is given, the AP element will begin directly after the last element in the source order of the page. This means, if the sidebars are first element in the #container in the document's source order, they will appear at the top of the #container even without being given a top value. However, if they are moved later in the source order for any reason, they'll need a top value to appear where you desire.
2. Absolutely positioned (AP) elements are taken out of the flow of the document. This means the elements around them don't know they exist and don't account for them when taking up their proper space on the page. Thus, an AP div should only be used as a side column if you are sure the middle #mainContent div will always contain the most content. If either sidebar were to contain more content, that sidebar would run over the bottom of the parent div, and in this case the footer as well, and the sidebar would not appear to be contained.
3. If the above mentioned requirements are met, absolutely positioned sidebars can be an easy way to control the source order of the document.
4. If the source order is changed, the top value should be equal to the height of the header since this will cause the columns to visually meet the header.
*/
.thrColAbsHdr #header {
height: 60px; /* if you're changing the source order of the columns, you'll may want to use a height on the header so that you can give the columns a predictable top value */
background: #DDDDDD;
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
.thrColAbsHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.thrColAbsHdr #sidebar1 {
position: absolute;
top: 267px;
left: 3px;
width: 150px; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 10px 15px 20px; /* padding keeps the content of the div away from the edges */
background-color: #fff;
}
.thrColAbsHdr #sidebar2 {
position: absolute;
top: 267px;
right: 3px;
width: 160px; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 10px 15px 20px; /* padding keeps the content of the div away from the edges */
background-color: #fff;
}
.thrColAbsHdr #mainContent {
margin: 0 200px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. */
padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
.thrColAbsHdr #footer {
padding: 0 10px 0 20px;
background-color: #CCC;
}
.thrColAbsHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
-->
</style><!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.thrColAbsHdr #sidebar1 { width: 180px; }
.thrColAbsHdr #sidebar2 { width: 190px; }
</style>
<![endif]--></head>
<body class="thrColAbsHdr">
<div id="container">
<p><img src="Images/Header Home.png" width="509" height="144" align="absmiddle" /><img src="Images/www.yoursouthlandsmile.png" width="163" height="52" /></p>
<p><img src="Images/Links.png" width="780" height="38" /></p>
<div id="sidebar1">
<h3>
<!-- end #sidebar1 -->
Meet The Doctors:</h3>
<p> <img src="Images/Dr. J.png" alt="" width="83" height="95" align="absmiddle" /></p>
<p>Dr. J. Chris Harvan </p>
<p><img src="Images/Dr.png" alt="" width="82" height="93" align="absmiddle" /></p>
<p>Dr. Kristina Harven</p>
<!-- end #sidebar2 -->
</div>
<div id="sidebar2">
<p> </p>
<p><img src="Images/Invisalign.png" width="141" height="46" /></p>
<p><img src="Images/Invisalign.png" alt="" width="141" height="46" /></p>
<p><img src="Images/Invisalign.png" alt="" width="141" height="46" /></p>
<p><img src="Images/Invisalign.png" alt="" width="141" height="46" /></p>
<p><img src="Images/Invisalign.png" alt="" width="141" height="46" /></p>
<p> </p>
</div>
<div id="mainContent">
<h1> Your Dental Health Is Our Priority</h1>
<p>
<p><img src="Images/DO2.png" width="119" height="119" align="left" />Welcome to Southland Smiles. Your oral health is our highest priority, and we strive to help our patients experience a positive health change and maintain that change for the rest of their lives. </p>
<p><br />
<marquee><img src="Images/Marquee/imgres-1.jpeg" height="119" /><img src="Images/Marquee/imgres-2.jpeg" height="119" /><img src="Images/Marquee/imgres-3.jpeg" height="119" /><img src="Images/Marquee/imgres-4.jpeg" height="119" /><img src="Images/Marquee/imgres-5.jpeg" height="119" /><img src="Images/Marquee/imgres-6.jpeg" height="119" /><img src="Images/Marquee/imgres.jpeg" height="119" /></p>
<p>
<!-- end #mainContent -->
</div>
</p>
<p> </p>
<p> </p>
<div id="footer">
<p> <img src="Images/296268493113.png" width="29" height="29" align="absmiddle" /> | 25521 East Smoky Hill Road, Suite 140, Aurora, CO 80016 </p>
<div><a href="mailto:info@yoursouthlandsmile.com">info@yoursouthlandsmile.com</a></div>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
And here is the code for the style sheet that defines the background: Code:
body {background-image: url(images/background.png);
background-repeat: repeat-y;
background-position: center;
background-color: #f7f4ee;}
My first post.... ok... First I would like to say THANK YOU to anyone who has time to bestow some knowledge to me on what I am sure is a highly noob-esqe situation. I would also like to say that I have thoroughly search this and other forums for my issue, unfortunately I dont think I understand CSS or any web design enough to comprehend the solutions given. I think this may require someone with the knowledge I lack to come down to my level... if you can bend that low.. and walk me thru layman term-style. Again thanks in advance for anytime spent helping out. That being said I was recently trying to jazz up my website that is hosted by a certain music community. I do a decent amount of business thru this site so I wanted to step up the interface a little and get away from using the standard page setup they give you. They do offer the option to edit CSS to construct your own for a little more customization. I jumped in, and after a few days of struggling, I got it looking how I wanted it. I was excited until I realized it looked different on almost every computer i visited the site on. My Background is fine, but the links to paypal and other content is all over the place(e.g. song player, twitter link, buttons) I have tweaked and tweaked, but have not been able to remedy this apparently common problem due to my lack of knowledge and experience. My only hope is to post the coding here and have a Smart Guy/Girl guide me in the right direction. I hope Im not asking too much guys... here goes (I know I can post my url here, how can I redirect you guys to veiw my site??) /********* SoundClick CSS Template (based on custom version Mon, Sep 28 2009) ***********/ Quote: /* general */ body {background: url((MyBGJPEGforbackground)); margin:0px;} body,div,tr,td,select,textarea,input,option {font-family:Verdana; font-size:11px;} a, a:link, a:visited {color:white; text-decoration:none;} a:hover {color:#ff0000; text-decoration:underline;} .pageFooter {clear:both; color:gray; padding:1px 0px 50px 20px;} .infoBox {width:650px; margin:50px auto; background:white; color:black; border:silver solid 1px; padding:30px; font-size:14px;} /* hardly used, its for error messages to user */ .infoBox .quotes {margin:20px; border:#4b4b4b dashed 1px; font-style:italic; padding:10px; background:;} /* main containers */ .mainTable {background: url((MainTableBGPicWentHere)) ; color:#999999; width:750px; margin-left:auto; margin-right:auto; text-align:center;} .mainContent {background:url(/images/siteNav/transbgblocks/black/bg_0.png); color:#999999; width:725px; float:left; overflow:hidden; margin:0px 0px 20px 5px;} /* IE6 doesnt support our preferred overflow:visible */ /* left navigation */ .navigation {background:url(/images/siteNav/transbgblocks/black/bg_0.png); color:white; width:300px; float:left; overflow:hidden; margin:10px 0px 20px 0px;} .navigation a:link, .navigation a:visited {color:#999999;} .navigation a:hover {color:#ffffff;} .navigationDivider {height:6px; line-height:6px; border-bottom:#232323 dashed 1px; margin-bottom:6px;} /* general elements */ .headline {background:transparent; color:transparent; font-weight:bold; border-bottom:transparent dashed 0px; border-top:transparent solid 0px; padding:330px 1px 50px 50px;} .headlineBig {font-size:22px; font-weight:normal;} .headlineSuppl {float:right; margin:0px 0px 0px 100px; color:#666666; font-size:11px; font-weight:normal;} /* for text/links on the right side of main headline (e.g. song count on main page) */ .headlineSuppl a:link, .headlineSuppl a:visited {color:#666666; text-decoration:none;} .headlineSuppl a:hover {color:black; text-decoration:underline;} .pageturner {background:; color:#cccccc; border:#4b4b4b solid 1px; text-align:right; padding:10px; font-size:13px; font-weight:normal;} /* pages menu (previous, next..), e.g. on music page, message board */ .pageturner .nonactive {color:#666666;} .pageturner a:link, .pageturner a:visited {color:#cccccc; text-decoration:none;} .pageturner a:hover {color:#ff0000; text-decoration:underline;} .listedPicsBox {border:#4b4b4b solid 1px; width:114px; height:160px; overflow:hidden; padding:2px 1px 4px 1px; margin:0px 4px 10px 4px; float:left; font-size:11px; text-align:center;} .listedPics {width:110px; height:125px; background-position: center center; background-repeat: no-repeat; margin:2px 0px 4px 0px; overflow:hidden} .breaker {height:1px; line-height:1px; clear:both} /* general color and font assets */ .color_supplemental {color:#666666;} /* used e.g. for song pages comments count */ .alternateBG0 {background:none;} /* used as background colors for comments */ .alternateBG1 {background:none;} /* alternate color */ /* main page (the default entry page) */ .mainContent .contHeadline {clear:left; font-size:16px; color:#cccccc; padding:1px 0px 2px 20px;} /* interview questions */ .mainContent .contText {clear:left; padding-left:15px;} .mainContent .contInterview {clear:left; padding-left:30px;} .mainContent .newsBox {clear:both; background:transparent; color:white; border:transparent solid 0px; margin:6px 20px 0px 20px; padding:100px;} /* main page: video box (different from video page) */ .videoBox_mainPage {padding:5px; margin:0px 100px 20px 100px;} .videoBox_mainPage .video {padding:5px; margin-bottom:10px;} .videoBox_mainPage .title {font-size:15px; text-align:center; margin-bottom:3px;} .videoBox_mainPage .shareLinks {float:right; padding:2px; border-bottom:#4b4b4b dashed 1px;} .videoBox_mainPage .labels {color:#666666; width:100px; padding-right:20px; text-align:right; float:left;} .videoBox_mainPage .info {padding-left:120px;} .videoBox_mainPage a:link, .videoBox_mainPage a:visited {font-size:13px; font-weight:normal; text-decoration:none;} .videoBox_mainPage a:hover {text-decoration:underline;} /* main page: upcoming shows */ .liveshowsBox {background:#cccccc; color:#000000; width:300px; margin:15px 2px 15px 10px; float:right; clear:right;} .liveshowsItems {padding:4px 0px 0px 0px; font-size:11px; clear:both;} .liveshowsBox a:link, .liveshowsBox a:visited {color:#000000; text-decoration:none;} .liveshowsBox a:hover {color:#666666; text-decoration:underline; cursorointer;} /* main page: standard song box on artist page (only this song box or the embedded player is used. Never both together) */ .playerBox {float:left; clear:left; padding-left:20px; margin:300px 0px 100px 0px;} .playerBox .playerHead {background:#000000; color:#cccccc; border-top:#4b4b4b solid 1px; border-bottom:#4b4b4b solid 1px; text-align:right; font-size:13px; padding:3px 5px 3px 3px;} .playerBox .playerHead a:link,.playerBox .playerHead a:visited {color:#666666; text-decoration:underline;} .playerBox .playerHead a:hover {color:#ffffff; text-decoration:underline;} .playerBox .songBox {background:#cccccc; border-bottom:#4b4b4b solid 1px; width:330px; padding:100px 0px 0px 1px; overflow:auto;} .playerBox .songBox .singleSong {color:#000000; font-size:13px; padding:1px;} .playerBox .songBox .singleSong:hover {background:#000000; color:#cccccc; cursorointer;} /* main page: VIP embedded player (only this embedded player or the standard song box is used. Never both together) */ .embeddedPlayer {margin:1px auto; width:750px;} /* main page: tabbed content headers (fans,stations) */ .tabbedCont_header li a:link, .tabbedCont_header li a:visited {background:#000000; color:#666666; text-decoration:none; margin:0px 20px 0px 0px; padding:3px 6px 3px 6px; border:#666666 solid 1px; border-bottom:none; } .tabbedCont_header li a:hover {color:white;} .tabbedCont_header li.selected a:link, .tabbedCont_header li.selected a:visited {background:#111111; color:#999999; border:#111111 solid 1px; border-top:#999999 solid 1px; font-weight:bold;} /* main page: fans, stations (tabbed content) */ .fansBox {padding:30px 20px 20px 20px; clear:both;} .fansBox a:link, .fansBox a:visited {} .fansBox a:hover {} .fancount {background:#111111; color:#666666; text-align:right; padding:3px 5px; margin-bottom:8px; font-size:11px; font-weight:normal; border-bottom:#232323 dashed 1px; border-top:#222222 solid 1px; } .fancount a:link, .fancount a:visited {color:#B8B8B8; text-decoration:none;} .fancount a:hover {color:#E6E6E6; text-decoration:none;} .fansBox_content {background:url(/images/siteNav/transbgblocks/black/bg_20.png) important; background:#111111;} .fansBoxLastLine {background:#111111; color:#666666; clear:both; text-align:right; padding:3px 5px; margin-top:8px; font-size:11px; font-weight:normal; border-bottom:#222222 solid 1px; border-top:#232323 dashed 1px;} .fansBoxLastLine a:link, .fansBoxLastLine a:visited {color:#B8B8B8; text-decoration:none;} .fansBoxLastLine a:hover {color:#E6E6E6; text-decoration:none;} .stationItem {clear:both; color:black; border-bottom:#4b4b4b dashed 1px; padding:0px 1px 0px 1px;} .stationPicBox {float:left;} .stationPics {width:70px; height:70px; background-position:center center; background-repeat: no-repeat; margin:0px 0px 1px 0px; overflow:hidden} .stationButtonsBox {float:left; padding:2px 15px 0px 5px; height:60px;} .stationsText {color:#999999; height:80px; overflow:hidden;} .stationlink a:link, .stationlink a:visited {color:#999999; font-size:16px; text-decoration:none;} .stationlink a:hover {color:#ff0000; text-decoration:underline;} /* music page */ .songsBox {border-bottom:#4b4b4b dashed 1px; width:510px; float:left; padding-bottom:2px; margin-bottom:10px;} .songsBox a:link, .songsBox a:visited {text-decoration:none;} .songsBox a:hover {text-decoration:underline;} a.songtitle:link, a.songtitle:visited {color:#999999; text-decoration:none; font-size:16px; font-weight:bold;} a.songtitle:hover {color:#ff0000; text-decoration:underline;} .songsBox .actionlinks {font-size:14px;} /* the links for full song info, add to station, rate this song... */ .songsBox .topSong {color:#666666; float:left; text-align:left; font-size:13px;} /* comments page */ .commentsWelcome {background:; color:#cccccc; margin:0px 20px 20px 20px; padding:20px; border:#4b4b4b solid 1px;} .commentsBox {border-bottom:#4b4b4b dashed 1px; padding-top:5px;} .commentsBox a:link, .commentsBox a:visited {text-decoration:none;} .commentsBox a:hover {text-decoration:underline;} .commentsBox .songComment {border-bottom:#4b4b4b dashed 1px; font-size:11px; padding:1px 3px; margin-bottom:5px;} .commentsBox .postdate {color:#666666; font-size:13px; font-weight:normal; text-align:right; margin:0px 5px 10px 0px;} .commentsBox .postdate a:link, .commentsBox .postdate a:visited {text-decoration:none;} /* for delete/edit links */ .commentsBox .postdate a:hover {text-decoration:underline;} .commentsBox .comment {font-size:14px; padding:0px 5px 0px 140px;} .commentsBox .bandSignature {border-top:#4b4b4b dashed 1px; color:#666666; width:310px; margin-top:15px; line-height:20px;} .commentsBox .ratingsBox {float:right; width:220px; border-left:#4b4b4b dashed 1px; margin-bottom:10px;} .ratingsBox .label {width:115px; text-align:right; float:left; padding-right:20px;} /* also used for .commentsPostBox .ratingsBox */ .commentsPostBox {padding:10px; margin:20px 0px; background:#FFCC99; color:#000000; border-top:black solid 2px; border-bottom:black solid 1px;} .commentsPostBox .ratingsBox {background:#ECECEC; color:#000000; clear:both; padding:7px 0px; margin:0px 250px 20px 30px;} /* video page */ .videoBox {background:black; color:#E0E0E0; padding:5px; line-height:22px;} .videoBox .video {padding:20px; margin-bottom:10px;} .videoBox .title {text-align:center; background:#121212; color:#F3F3F3; font-size:16px; padding:1px;} .videoBox .labels {color:#666666; width:200px; padding-right:20px; text-align:right; float:left;} .videoBox .info {float:left; width:440px;} .videoBox a:link, .videoBox a:visited {color:#0099CC; text-decoration:none; font-size:11px;} .videoBox a:hover {color:red; text-decoration:underline;} .videoListBox {border-top:#4b4b4b dashed 1px;} /* photo pages */ .photopage {background:black;} .selectedPhoto_box {text-align:center;} .selectedPhoto_box .selPhoto_title {background:#111111; color:#cccccc; border-bottom:#666666 solid 1px; font-size:15px; padding:4px;} .photolist {padding:10px 0px 0px 30px;} .photolist .photobox {background:none; float:left; width:118px; height:180px; margin:5px 0px 20px 10px; padding:5px 0px 10px 0px; overflow:hidden; cursorointer; text-align:center;} .photobox .photo {height:150px; width:118px; overflow:hidden;} .photobox .photoComment {color:#444444; font-size:11px;} .photolist .photobox_on {background:#222222; float:left; width:118px; height:180px; margin:5px 0px 20px 10px; padding:5px 0px 10px 0px; overflow:hidden; cursorointer; text-align:center;} .photobox_on .photo {height:150px; width:118px; overflow:hidden;} .photobox_on .photoComment {color:#999999; font-size:11px;} /* reviews page */ .reviewsBox {padding:10px 30px; border-bottom:#4b4b4b dashed 1px;} .reviewsBox .rev_headline {color:#cccccc; font-size:16px; font-weight:bold;} .reviewsBox .rev_text {padding:5px 5px 5px 30px; font-size:14px;} .reviewsBox .rev_source {text-align:right; font-size:13px; color:#666666;} /* licensing page */ .licenseSummary {margin:0px 20px 20px 20px; padding:20px; background:; color:#cccccc; border:#4b4b4b solid 2px;} .licenses {margin-top:70px;} .licenses .headline {font-size:14px;} .lic_tableSongs {border:none;} .lic_tableSongs .columnHeaders td {border-bottom:#4b4b4b solid 1px; font-weight:bold; font-size:11px;} .lic_tableSongs tr td {border-bottom:#4b4b4b dashed 1px; padding:5px 0px;} /* widgets page */ .widgetMargin { padding:8px 0px 8px 35px;} .widgetSpacer {width:100; height:15px; clear:both;} /* tag cloud */ .tagCloud {padding:10px;} .tagCloud .cloudItem {float:left; padding:2px; white-space:nowrap; margin:0 6px 0 0;} .tagCloud .cloudItem:hover {background:#005782; color:white; cursorointer;} .tagCloud .cloudS10 {font-size:10px; color:#aaaaaa;} .tagCloud .cloudS20 {font-size:11px; color:#aaaaaa;} .tagCloud .cloudS30 {font-size:11px; color:#999999;} .tagCloud .cloudS40 {font-size:12px; color:#999999;} .tagCloud .cloudS50 {font-size:14px; color:#666666;} .tagCloud .cloudS60 {font-size:16px; color:#666666;} .tagCloud .cloudS70 {font-size:18px; color:#333333;} .tagCloud .cloudS80 {font-size:22px; color:#333333;} .tagCloud .cloudS90 {font-size:28px; color:#111111; } .tagCloud .cloudS100 {font-size:36px; color:#111111;} .tagCloudMore {padding:6px 0 0 0; margin:0 10px; text-align:center; border-top:#ccc solid 1px; font-size:11px;} .tagCloudMore a, .tagCloudMore a:link, .tagCloudMore a:visited {color:#999; text-decoration:none;} .tagCloudMore a:hover {color:red; text-decoration:underline; cursorointer;} I've tried to insert a horizontal drop down CSS menu in my layout. However, the menu bar displays about 10 pixels lower in Firefox than it does in IE. <a href="(URL address blocked: See forum rules)">Link</a> I checked the margins, padding but can not seem to find a way to get the menu to display at the same position in both browsers. Any guidance is very appreciated. thanks. Please take a look here http://www.vngs.com/test.html in Firefox, the first image is located at top-left, and the second is located at right-bottom. But in IE, both of them are on top How can I fix this? thanks Hi ; Please view http://www.baykam.com/index_en.php . The page seems different and tables collapse in internet explorer . Here is the code in the header of the page . Code:
<link href="default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
@import url("layout.css");
-->
</style>
</head>
If yiou tell me which css sheet the code is using I can paste it here too ... Ok i have created an html table with some info in it.. now there is a problem ( like always ) its viewable in 2 different ways for example in f/f the table are off.. and in IE it shows the way i want it to.. but i need it to work the same in both browsers... Code:
<form method="post" action="<?php print $PHP_SELF; ?>">
<table border="0" cellpadding="0" cellspacing="0" align="center" width="90%">
<tr>
<td width="100%" align="center">
<table border="0" cellpadding="2" cellspacing="1" bgcolor="#eeeeee" align="center" width="100%" class="tablesOne">
<tr>
<td colspan="5" bgcolor="#eeeeee"> </td>
</tr>
<tr>
<td width="100%" bgcolor="#eeeeee" valign="center" align="center">SERVICE FORM</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td width="100%" align="left">
<table border="1" cellpadding="2" cellspacing="2" width="45%" class="tablesTwo">
<tr>
<td>AMT</td>
</tr>
<tr>
<td> Americo Miranda</td>
</tr>
<tr>
<td> San Juan, PR 00921</td>
</tr>
<tr>
<td> Phone: (787) 706-8272, Fax: (787) 706-8151</td>
</tr>
</table>
</td>
</tr>
</table>
and i added some css to it.. Code:
.tablesOne {
border-top: solid 1px #eeeeee;
border-bottom: solid 1px #eeeeee;
border-right: solid 1px #eeeeee;
border-left: solid 1px #eeeeee;
font-family: serif;
font-size: 18px;
color: #000000;
}
.tablesTwo {
border-top: solid 1px #eeeeee;
border-bottom: solid 1px #eeeeee;
border-right: solid 1px #eeeeee;
border-left: solid 1px #eeeeee;
background: #ffffff;
font-family: serif;
font-size: 12px;
color: #000000;
}
Any help on this? has anyone fix this damn errors yet with IE, and Firefox. Hi There, I have deisgned a site using css layouts and have built it. It looks exactly how I want it to in Firefox and other browsers that have proper CSS support. I am unsure what I need to do to 'fix' the ie bugs. Can anyone give me any pointers? the test page is he http://www.storesprite.org/layouts/ Thanks I don't want a browser plugin. I want a tool to open a CSS file and show me samples of the styles. I would like to edit the styles and see the effects of my edits. Any suggestions? Hello - this is my first time on the forum. I'm sure I must be missing something really simple. I'm not very experienced at CSS, and must admit I can't grasp the inherited properties principle, which may be the cause of my problem. I've pasted my code for the web page and my properties stylesheet below. Although, as you can see, I want to put a header near the top of the web page, nothing appears in my browser. (I mean nothing, the words I have put the header tag to just aren't there). I would be very grateful for some help. Thank you. The CSS validator says "Value Error : color attempt to find a semi-colon before the property name. add it" which I don't understand. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <head> <title>Love Local Food - about us</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="keywords" content="love local food, love local, love food, local food, exeter food, devon food, devon vegetables, exeter vegetables, local vegetables, real bread, slow food, slow food exeter, slow food devon, rye bread, good food, good local food, van food, van exeter, van devon, local van, mobile shop, workshops, workshop, farm, farms, organic, organic food exeter, fresh food, local fresh food, fresh food exeter, fresh food devon " /> <meta name="description" content="We sell good fresh food by van in your locality" /> <meta http-equiv="PRAGMA" content="NO-CACHE" /><!-- --> <link rel="stylesheet" type="text/css" href="layout.css" /> <link rel="stylesheet" type="text/css" href="presentation.css" /> </head> <body> <!-- Header --> <div id="bar-top"> <p class="links"> <a href="index.html">home </a> <a href="mobileshop.html">mobile shop </a> <a href="farms.html">farms </a> <a href="workshops.html">workshops </a> <a href="joinus.html">join us </a> <a href="aboutus.html">about us </a> <a href="contactus.html">contact us </a> </p> </div> <!-- end of header --> <!-- main column --> <div id="main"> <p> <img src="slice4.jpg" alt="love local food" border="0" width="400" height = "125" class="center" /></p> <p> <img src="logo.gif" alt="love local food" align="left" border="0" width="300" height="175" /></p> <p class="header">about love local food</p> <p> Love Local Food is a new social enterprise initiated by Emmas Bread, Shillingford Organics, West Town Farm and organicArts along with others including David Tuffield, David Bossano, Rachel Moffat, Nicola Beglin, Paula Garwood, Amber Dawkins and Chukumeka Maxwell.</p> <p class="text">We are a group of local producers, educators and passionate food lovers who propose to bring a new and simple way of shopping to Exeter and surrounding areas.</p> <p class="text">We first met in July 2007 with the intention of becoming a workers co-operative that supported each other in the produce and sale of locally grown food.</p> <p class="text">We want to provide local food to local communities, provide a fair return to local producers and provide links between the consumer and producer through educational activities and resources.</p> <p class="text">We want to help consumers make the connection between the food they eat and the environment in which they live, and to help local people achieve well being.</p> <p class="text">We look to a future of the sustainable production and distribution of food, including allotments and gardens, where we renew our relationship with food and nature, and share the land.</p> <p class="text">A future where local communities, schools and other institutions are involved in commissioning local food production, community celebrations and sharing with other cultures.</p> <p class="text">A future where we are all open to new ideas about food and our relationship with it.</p> <!--links-box--> <div id="links-box"> <p class="links"> <a href="emmasbread.html">emmas bread </a> </p> <p class="links"><a href="shillingford.html">shillingford organics </a></p> <p class="links"><a href="westtown.html">west town farm </a></p> <p class="links"><a href="organicarts.html">organicARTS </a> </p> </div> <!--end of links box--> </div> <!-- end of main column --> </body> </html> /* Presentation Stylesheet */ .header { font-family: Arial, Helvetica, sans-serif; font-size:20px; color:#000000 margin:0; padding:10px 10px 10px 15px; } .links { font-family: Arial, Helvetica, sans-serif; text-align:center; font-size:20px; color:#000000; } .links a:link { color: #560007; text-decoration:none; } .links a:visited { color: #EF9C00; text-decoration:none; } .links a:active { color:#560007; text-decoration:none; } .text { font-family: Helvetica, Arial, Verdana, sans-serif; font-size:15px; color:#000000; } Happy New Year! I'm having issues with my website in progress, http://www.vilardojardim.com/about.html Everything seems to be displaying fine in Firefox, Safari and Explorer 8.0.6, but the IE 'Compatibility View Settings' makes the layout go all wiggy. Is there any way of automatically turning this off? Or, can someone help me out with a way to adjust the CSS to avoid the problem altogether? Thanks in advance for any assistance. I'm hoping I can get a bit of help addressing the display of an unordered list. I'm trying to view the list horizontally, and not vertically. Here is the code, and thanks in advance. CSS -------------------------------- #pages { margin-top: 12px; float: right; margin-right: 125px; font: normal 14px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif; color: #000; } #pages ul { list-style-type: none; margin: 0; padding: .5em 0; display: inline; } #pages li a { display: block; width: 1.5em; height: 1.5em; padding: 0; text-align: center; vertical-align: text-middle; text-decoration: none; } #pages a:link, #pages a:visited { margin: 0 10px 0 10px; text-decoration: none; color: #000; } #pages a:link#pagescurrent, #pages a:visited#pagescurrent { border-bottom: 1px solid #000; background: transparent; color: #000; } #pages a:hover { background-color: #949494; color: #fff; } HTML -------------------------- <div id="pages"> <ul> <li><a href="#" id="pagescurrent" title="next slide">1</a></li> <li><a href="#" title="next slide">2</a></li> <li><a href="#" title="next slide">3</a></li> <li><a href="#" title="next slide">4</a></li> </ul> </div> I am working on a pop out menu on warrenhomes . The image displays properly in firefox and IE8, but the menu leaves are cut off in IE7 (or IE8 compatibility mode). pushing the list-style-position:inside; line isn't really helping either. Can someone tell me why ie7 is displaying list-style-image differently and possibly how I can correct this issue? I'm at a loss because I'm not very familiar with css... this page www.centerpointpilates.com/index.html has pricing formatted by line 42 of the code at the very bottom of this post, printed out here by itself: Code: #main #plans {
position: relative;
float: right;
width: 220px;
background-color: transparent;
border: 1px solid #6B9D98;
margin: 0px 0px 10px 10px;
left: 428px;
top: 29px;
}
I've done something but I'm unaware of what! The text within the div using this now goes off the screen, all the way to the right! Can anyone tell me why? I'm printing the whole css sheet below, the above code is line 42. If I can't figure this out tonight I'm going to just redo the page using tables until I can find what is wrong. Code:
body {
background-color: #F6EEC2;
margin: 10px;
padding: 0px;
}
#bannerBox {
background-color: transparent;
background-image: url(gfx/cpp_banner2.jpg);
background-repeat: no-repeat;
border: none;
padding-left: 5px;
height: 80px;
margin: 0px;
}
#leftNav {
position: absolute; left: 10px; top: 100px;
width: 130px;
background-color: transparent;
}
#navBlock {
position: relative; left: 7px;
width: 110px;
background-color: transparent;
border: 1px solid #6B9D98;
}
#main {
background-color: transparent;
position: relative;
margin-top: 5px;
margin-left: 138px;
margin-right: 0px;
border-left: 1px solid #6B9D98;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 137px;
margin-right: 0px;
}
html>body #main {
margin-left: 139px;
margin-right: 0px;
}
#main #plans {
position: relative;
float: right;
width: 220px;
background-color: transparent;
border: 1px solid #6B9D98;
margin: 0px 0px 10px 10px;
left: 428px;
top: 29px;
}
#tagLine {
background-color: transparent;
border: none;
margin: 0px;
padding-top: 10px;
padding-bottom: 50px;
}
IMG {
position: relative;
float: right;
border: 0px;
padding-left: 20px;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 10px;
}
P,H1,H2 {
margin: 0px 10px 0px 10px;
}
H1 {
font: bold 16px "arial";
color: #6B9D98;
letter-spacing: 0px;
padding-left: 5px;
padding-top: 3px;
padding-bottom: 10px;
}
H2 {
font: bold 14px "arial";
color: #6B9D98;
letter-spacing: 0px;
padding-top: 10px;
padding-bottom: 13px;
}
#leftNav P {
padding-top: 6px;
margin: 0px 10px 0px 10px;
}
#leftNav P.spacer {
padding-bottom: 15px;
}
#navBlock P {
font: bold 11px arial;
color: #6B9D98;
padding-top: 1px;
padding-bottom: 1px;
}
#main P {
text-align: justify;
font: 11px arial;
color: #6B9D98;
line-height: 17px;
padding-left: 10px;
padding-bottom: 10px;
}
#main P.head {
font: bold 12px arial;
color: #6B9D98;
padding-left: 10px;
padding-bottom: 3px;
}
#plans P {
font: 12px "arial";
color: #6B9D98;
padding-left: 10px;
padding-bottom: 3px;
}
#plans P.list {
text-align: justify;
font: bold 10px arial;
color: #6B9D98;
width: 150px;
padding-left: 15px;
padding-bottom: 5px;
}
#plans P.list2 {
text-align: justify;
font: bold 10px arial;
color: #6B9D98;
width: 180px;
padding-left: 15px;
padding-bottom: 5px;
}
#plans P.price {
font: 11px arial;
color: #6B9D98;
padding-left: 15px;
padding-bottom: 1px;
}
#tagLine P {
font: italic 11px arial;
color: #6B9D98;
padding-bottom: 3px;
}
#tagLine P.copy {
font:11px "lucida console";
color: #6B9D98;
padding-top: 5px;
}
A.nav:link {
text-decoration: none;
background-color: transparent;
color: #6B9D98;
font: bold 11px arial;
}
A.nav:visited {
text-decoration: none;
background color: transparent;
color: #6B9D98;
font: bold 11px arial;
}
A.nav:hover {
text-decoration: none;
background-color: transparent;
color: #6B9D98;
font: bold 11px arial;
}
A.reg:link {
text-decoration: none;
background-color: transparent;
color: #6B9D98;
border-bottom: 1px solid #8DBFBA;
}
A.reg:visited {
text-decoration: none;
background-color: transparent;
color: #8DBFBA;
border-bottom: 1px solid #8DBFBA;
}
A.reg:hover {
text-decoration: none;
background-color: transparent;
color: #8DBFBA;
border-bottom: none;
}
Hello folks, I've made a page where the user can change the style sheets by simply enabling/disabling them with a javascript. The page also contains 4 layers which are stacked on top of one another. I've came up against a problem that has me stumped! Basically if the user switches style sheets to a sheet that contains a smaller font-size, the currently visible Layer changes size which causes some of the text in the layer to be cut out of view. It also re-aligns the DIV contents to the left of the DIV instead of centered as it is set. I have tried playing around with overflow:visible and giving the layer a width to accomodate all text sizes, but I couldn't get it to work. Any ideas how I could get it to work? The only other idea I had was to reload the page but that isn't very elegant is it?! Any CSS experts know how it should be done? Best regards. Hi all, Is there any way to make the View-Text Size work in CSS - or more specifically, is there any way to limit how large or small the text becomes? I know you can use 0.8em font sizes, but I don't want the font to them become too large or small when adjusted, so is there any way to limit this? Thanks. Hello, I'm having an interesting dilemma. Hopefully I can get some advice. I have created a site using a 2 column liquid layout. The site is created using CSS. I have tested successfully in both FF & IE (which my client uses). In the content area, there is a data table that is generated dynamically. At times the table consists of many columns. If the table strecthes beyond the screen view (resulting in horizontal scrolling) the container/layout does not stretch with the table. Any thoughts? Any suggestions will be greatly appreciated! Below are snippets of code from the css code and html code: CSS Code:
body {
margin: 0px 20px 0px 20px;
background-color: #069;
background-image: url(../images/bkgd.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 70%;
color: #036;
}
#container {
width: 100%;
margin: 0px auto 0px auto;
background-color: #DDD;
}
...
#content {
background-color: #FFF;
padding: 20px;
margin-left: 190px;
}
...
#content_main table.data {
margin: 0px 0px 0px 0px;
border: 1px solid #369;
background-color: #FFF;
}
#content_main table a.nobrdr {
border-bottom: none;
}
#content_main table.data th {
height: 20px;
color: #E8E8E8;
text-align: center;
background-color: #369;
border: 1px solid #2C537D;
text-transform: uppercase;
}
#content_main table.data td {
height: 25px;
padding: 3px;
border: 1px solid #CCC;
vertical-align: top;
line-height: 15px;
}
HTML Code: <table width="100%" border="0" cellpadding="0" cellspacing="0" class="data" summary="this table displays BDXT selected data"> <tr> <th scope="col" width="5%" nowrap>fund</th> <th scope="col" width="6%" nowrap>bsli</th> <th scope="col" width="4%" nowrap>reg</th> <th scope="col">title</th> <th scope="col" width="9%" nowrap>projcode</th> <th scope="col" width="7%" nowrap>cip</th> <th scope="col" width="4%" nowrap>afc</th> <th scope="col" width="10%" nowrap>avail</th> <th width="10%" nowrap scope="col">oblig</th> <th width="10%" nowrap scope="col">oblig</th> <th width="10%" nowrap scope="col">oblig</th> <th width="10%" nowrap scope="col">oblig</th> <th scope="col" width="10%" nowrap>unoblig</th> <th scope="col" width="5%" nowrap> </th> </tr> <tr> <td scope="row" align="center" nowrap>682A</td> <td align="center" nowrap>1A01A1</td> <td align="center" nowrap>HQ</td> <td>NEXT GENERATION WEATHER RADAR (NEXRAD) </td> <td align="center" nowrap><a href="#">25570427</a></td> <td align="center" nowrap>W020200</td> <td align="center" nowrap>140</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000</td> <td align="center" nowrap><a href="#" class="nobrdr"><img src="images/icon_view.gif" alt="view detail" width="15" height="13" border="0"></a></td> </tr> <tr> <td scope="row" align="center" nowrap>682A</td> <td align="center" nowrap>1A01A1</td> <td align="center" nowrap>HQ</td> <td>NEXT GENERATION WEATHER RADAR (NEXRAD)</td> <td align="center" nowrap><a href="#">25570427</a></td> <td align="center" nowrap>W020200</td> <td align="center" nowrap>3J0</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000,000</td> <td align="center" nowrap><a href="#" class="nobrdr"><img src="images/icon_view.gif" alt="view detail" width="15" height="13" border="0"></a></td> </tr> <tr> <td scope="row" align="center" nowrap>682A</td> <td align="center" nowrap>1A01A1</td> <td align="center" nowrap>TC</td> <td>NEXT GENERATION WEATHER RADAR (NEXRAD)</td> <td align="center" nowrap><a href="#">25570427</a></td> <td align="center" nowrap>W020200</td> <td align="center" nowrap>4C0</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000</td> <td align="center" nowrap><a href="#" class="nobrdr"><img src="images/icon_view.gif" alt="view detail" width="15" height="13" border="0"></a></td> </tr> </table> 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! 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 Anyone have any recommendations on a good program to check cross browser stuff. I am tired of having to open every browser up to check my sites. Also, anyone know any good links for getting better at coding for cross browser CSS? Thanks! |
|||||||