|
CSS - Html Tag To Tell Browser Display After Css Rendering Is Done
Hi. I'm not sure if I should post in html or css section. But I go here first.
For some reason, my site behaves a bit weird on IE8. When it's loading it display part of the content but it's like the font or text are moving (like it's doing the css rendering). But when it finished loading the whole page then the content looks right. But is there a way to tell the browser to do the rendering like in the background and once all the content is loaded that display everything all at once? Similar TutorialsHi, well i am using quicksand and in it i wanted to use tootips but no one on internet helped me by telling how to do so. So, i am now using css technique, the method is very simple css trick, when you hover over the game icons its details appear, and when you hover over the details then the details disappear. The details disappear in IE and firefox but it is not the case with google chrome. here is the test page http :// letseedrop.blogspot.com/2011/01/testing-8. html i don't know what i am doing wrong, i also tried to use !important in css but it didn't helped. well i am pasting css here too if you don't want to go into the source code Code: .demosa {
position:relative;
top:0px;
left:0px;
margin:0px;
padding:0px;
}
.gamedetailpara {
text-decoration:underline;
color:#000000;
}
ul.gamecolumns {
min-height:300px;
list-style: none;
margin: 0px;
padding: 0px;
}
ul.gamecolumns li {
background:url('(URL )) no-repeat;
position:relative;
display: inline;
width: 114px;
height:118px;
float: left;
margin: 8px;
padding: 0px;
}
ul.gamecolumns li:hover {
z-index: 99;
}
ul.gamecolumns li img {
position:relative;
top:12px;
left:12px;
filter: alpha(opacity=100);
opacity: 1;
-ms-filter:"progidXImageTransform.Microsoft.Alpha(Opacity=100)"; /*--IE8 Specific--*/
}
ul.gamecolumns li:hover img{
position:relative;
top: 12px;
left:12px;
z-index: 999;
filter: alpha(opacity=100);
opacity: 1;
-ms-filter: "progidXImageTransform.Microsoft.Alpha(Opacity=100)";
}
ul.gamecolumns li .gamedetails {
position: relative;
left: 0px; top: 0px;
padding: 20px 4px 10px 10px;
display:none;
background:#ffffff;
font:bold 13px "Times New Roman", Times,sans-serif;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
z-index: 99999;
}
ul.gamecolumns li .gamedetails:hover {
display:none;
}
ul.gamecolumns li:hover .gamedetails {display: block;}
ul.gamecolumns li:hover .gamedetails:hover {display: none;}
thank you in advance. Hi, I'm relatively new to web development and I am self taught so please forgive any noobish comments haha. Basically I am building my company's web page and I have it all done except for one small discrepancy. My navigation bar at the top of the page has 4 links to the various sections of the website and they are in the right place in Safari, Chrome, Firefox, and Opera but in IE they are all out of whack. I've been banging my head against the desk trying to figure out whats wrong with either my CSS file or HTML code with no luck. I've validated both my CSS and HTML on the W3C validators and they come back with no errors. Not even a warning. Its all valid code. So I've heard this is common when dealing with compatibility issues that IE is the worst. So could someone please take a look at my code and see if they can find out whats wrong? Here is my CSS... #navbar { font-family: "Frutiger LT 55 Roman", Arial, sans-serif; height: 103px; width: 792px; padding-bottom: 0px; background-color: #0097c6; } #bigpic { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #leftcol { color: #585858; font-size: 10pt; width: 365px; padding-top: 15px; padding-left: 5px; padding-right: 7px; margin-bottom: 30px; font-family: Arial, sans-serif; float: left; } #rightcol { color: #585858; font-size: 10pt; width: 365px; padding-top: 24px; padding-left: 5px; padding-right: 5px; margin-bottom: 30px; font-family: Arial, sans-serif; float: right; } #threecol-mid { color: #585858; font-size: 10pt; width: 195px; padding-top: 24px; padding-left: 10px; padding-right: 5px; margin-bottom: 30px; font-family: Arial, sans-serif; float: left; } #threecol-right { color: #585858; font-size: 10pt; width: 195px; padding-top: 24px; padding-left: 5px; padding-right: 5px; margin-bottom: 30px; font-family: Arial, sans-serif; float: right; } #leftcol-nohead { color: #585858; font-size: 10pt; width: 365px; padding-top: 24px; padding-left: 5px; padding-right: 7px; margin-bottom: 30px; font-family: Arial, sans-serif; float: left; } #footer { width: 792px; padding: 0px 0px 0px 0px; margin: 0px 0px 10px 0px; color: #999999; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 8pt; border-top-style: dotted; border-top-color: #999999; border-bottom-style: dotted; border-bottom-color: #999999; border-width: thin; clear: both; } .logo { padding-top: 18px; padding-left: 10px; padding-right: 10px; float: left; } #navlinks { padding-top: 4px; padding-right: 5px; margin-bottom: -4px; position: relative; float: right; } .allcontent { width: 800px; margin-left: auto; margin-right: auto; } h2, h3, h4, h5 { margin-right: 1px; margin-left: 0px; margin-bottom: 0px; margin-top: 1px; padding-bottom: 0px; padding-top: 0px; font-family: Arial, sans-serif; } .heading1 { font-family: Arial, sans-serif; font-size: 16pt; } .heading2 { font-family: Arial, sans-serif; font-size: 10pt; font-weight: bold; } a { text-decoration: none; color: #0097c6; } img { border: 0; } .disclaimer { font-family: inherit; font-size: xx-small; } The problem lies with the navlinks ID I think. Basically, IE doesn't put the images (which are also links) where I want them while all the other browsers do. Something funky about the way IE reads CSS maybe? I don't know. If more info or code is needed I'll gladly provide. Thanks in advance, Griz Hi I'm developing a new website using non tabular css and xhtml. I've used a predefined template which has been edited to my needs for the project. The problem I have is the top menu displays perfectly in FF3 but not in IE7, the top menu has a width of 100% with each of the 4 links having a width of 25% so in FF3 displays right across the page perfectly, but in IE7 the last menu link breaks to a new line. This url shows the issue im having: http://www.purepcs-store.co.uk/tim/new HTML USED: Code:
<div id="menu" class="width">
<ul>
<li>
<a href="index.php" onfocus="blur()">
<span class="title ">Home</span></a>
</li>
<li>
<a href="products.php" onfocus="blur()">
<span class="title ">Products</span></a>
</li>
<li>
<a href="forum/" onfocus="blur()">
<span class="title ">Forum</span></a>
</li>
<li>
<a href="contact.php" onfocus="blur()">
<span class="title ">Contact Us</span></a>
</li>
</ul>
</div>
RELEVANT CSS: Code:
#menu {
margin: 0 auto;
}
#menu ul {
width: 100%;
float: left;
margin: 0;
padding: 0;
text-align: left;
background: #3B5D77 url(../images/bg/menu.gif) repeat-x top left;
}
#menu ul li {
display: inline;
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li a {
float: left;
width: 25%;
font: 400 1.2em arial, sans-serif;
letter-spacing: 0.1em;
color: #fff;
border-top: 7px solid #41637D;
border-bottom: 15px solid #FFF;
}
#menu ul li a span {
display: block;
padding: 2px 7px;
}
#menu ul li a span.desc {
font-size: 0.8em;
color: #8C8D94;
}
#menu ul li a:hover,
#menu ul li a.here {
background: #4A5C6A;
border-top: 7px solid #455660;
}
#menu ul li a:hover span.desc,
#menu ul li a.here span.desc {
color: #FFF;
}
.width {
width: 100%;
}
full css code can be seen he http://purepcs-store.co.uk/tim/new/css/layout.css Does anyone have any ideas on how to combat this issue, if you can point me in the right direction it would be much appreciated. Cheers I am having few html pages with external CSS used. Now when i want to change the brower text using View->Text size, its not allowing. Yes, i can change the font size in my CSS but I dont want all should see in the same font. Few people viewing those pages may not like that font. So, Can any body help me to find out how to change the text size of an html page having CSS. quirks mode is what i'm using, but now im thinking that in order to support all browsers i need to jump to strict. now im really in trouble. is strict right for me? xhtml or html? my site works perfectly in firefox because that is what i have been testing it in, but it works horribly in IE. so, will switching to strict give me the best compatibility? greetings. i have a small problem. i have a relatively positioned layer and an absolutely postioned layer. i want the rel layer to appear visually below the absolute layer. i'm not referring to z-index. simply i have a header layer and content layer. the header is absolute and the content is relative, BUT IE6 is demanding that in my code, i put the content first and header second. also if I drop the width property from the content/relative layer IE6 will allow me to have the absolute layer ontop of the relative layer in my markup. examples to be viewed in IE6 win. appears proper but was coded backwards Page appears correct, Header on top, content below BUT in the code the layers are in the wrong order. Coded in correct order but margin ignored Here the layers are coded with top layer first and bottom layer second. IE drops the top margin of the content layer and rams it to the top of the page. THIS IS THE PROBLEM Coded in correct order but i dropped the width attribute In this example the layers are coded in the proper order and they display properly but only if i remove the width attribute from the relatively positioned layer. i would appreciate any help. the page i'm working on is much more complex so although i can get both browsers to display properly, i don't like having the code for my navigation at the bottom of the page. thanks alot! carl hello gurus i am having a problem with my autosfill script .. i am using pHP as a server side. while i am filling a text box i can see a available records froms the db. but it shows html elements are getting displayed over div box (records) i am attaching image so you will get exact idea. is there any css property available so that i can display this properly? Hi all, I'm not sure if im being stupid here, but ive now been looking at it for far too long and its confusing me...i think this is a CSS issue, although it could be HTML, i really dont know. sorry if this is the case all. I'm just trying to set a skeleton layout for future work, at the top is a <div> for header, followed by the <div> for menus, then content and footer - standard layout really. But when i try to put the menus <div> below the header there seems the be an issue with the spacing...for some reason there is a gap between the two, unless i put a word in the menu <div> in which case the two section are touching(which is what want, just minus a random word in there) Code:
<body>
<div id="wrap">
<div id="innerwrap">
<div id="header" class="test">
<div id="logo" class="headericons">
COMPANY NAME
</div>
<div id="name" class="headericons">
COMPANY LOGO
</div>
</div>
<div id="menu"> so, this bit when empty, will not display properly, yet when a word is added it joins with the above <div>
<ul>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
</ul>
</div>
<div id="content">
Content
</div>
<div id="footer">
Company infomation here.
</div>
</div>
</div>
</body>
My CSS is: Code:
#wrap{width:60em;height:46em;background:silver;margin:0 auto;text-align:left; /*covers all in ie*/ padding-top:.1em;}
#innerwrap{ background-color:gray;margin:.5em;height:45em;}
#header{ background:#3F8BCA url(/img/topgradient.jpg) repeat-x scroll left top; height:6em;}
#name{ background-color:white; width:10em;height:6em; margin-left:2em;}
#logo{ background-color:PowderBlue;width:10em;height:6em;float:right; margin-right:2em;}
#menu{background-color:OliveDrab;}
#content{background-color:Olive;margin:0 2em; height:30em;}
#footer{background-color:OliveDrab;margin:.5em;}
ul {font-family:Arial,helvetica, sans-serif;}
a {text-decoration: none; color:White;}
Any help would be grand Regards and thanks MG My trable layout is this: several table rows: 1 data-element|(select-menu colspan3) 2 data-element|(select-menu colspan3) 3 data-element|(select-menu colspan3) 4 data-element|(select-menu with onchange(); colspan3) 2 rows not initially displayed data-element | select-menu data-element | select-menu | data-element | select-menu when a certain option from the onchange select is selected, the hidden rows are displayed, but, the data-elements above all expand to colspan2. 1 data-element |(select-menu colspan3) 2 data-element |(select-menu colspan3) 3 data-element |(select-menu colspan3) 4 data-element |(select-menu with onchange(); colspan3) data-element | select-menu data-element | select-menu | data-element | select-menu It seems on display the first hidden row is treated as one element causing the data-elements above to expand to acommodate. Is there anyway of preventing this side-effect!? 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. Hello, I am using ASP.NET to create a web application. I HAVE to use a master page which means that I do not have complete control over the rendering. The trick is, the master page defines a menu at the top of the page. I need to create a table that dynamically fills the contents of the REMAINDER of the screen. If there is any overflow, I want to scroll the contents. Does anyone know how I can have the table fill the REMAINDER of the screen? I can nest DIVs and such once I have that outer table. Thank you! Crystal Greetings everyone! I've been working on the following page for a couple of days now, and it looks fine in Safari and Firefox, but all my CSS fail in IE. I don't know what the problem is. Feel free to view the page at the following url http://www.netunification.com/demo/ I spoke with a friend and he speculates IE is having problems with the float command. I'm not so sure of this because I used the same CSS techniques while building the following site (http://www.the904.com/demo/). The904 page renders perfectly in IE and I can't figure out what the difference is between the pages. I thought I used the same concept with both pages. I've been trouble shooting the problem for a couple of days now, but I haven't had any luck. Can please someone take a look at my net u page (http://www.netunification.com/demo/) and suggest a solution Thanks in advance for any/all assistance. Your time and effort is greatly appreciated! Walt Hi guys, pretty new to CSS layout, and recently created a site for my girlfriend. I used 960 grid system to handle my layout css, and it renders perfectly in safari/FF/IE7+... after I installed IE Tester, i realized that IE6 wasnt rendering properly. The menu and z-index stuff arent appearing correctly. If anyone can have a quick look and let me know where my code is causing issues it would be a great help. I'm not allowed to post the URL, as im a new user, but I guess I can send through PM if you want to have a look? Thanks a bunch. Hi I am completely stumped by this. My CSS is not rendering in FF, I am running FF on a mac. Two pages, they are nearly the same, but show one display Css and the other does not - No CSS and With CSS I have been going crazy trying to find out what is wrong. The CSS link is here Thanks Jake Hi, Does anyone have any Ideas how to fix the two rendering bugs shown in the screenshots below? In IE5.5 The two top bars that stretch across the screen stretch too far distorting the page slightly. (Circled in red). http://www.explosiveracing.net/test/render_bugs/ie55.jpg In NN6 the backgrounds on the table cells do not fill correctly looking unsightly. (Circled in red). If you compare this to viewing the site in FF then you can see what I mean http://www.explosiveracing.net/test/render_bugs/nn6.jpg Site: http://www.explosiveracing.net/test/ Hi, I've designed a site that looks excellent on IE and Firefox on a PC, as well as (as far as I've been told) Safari. However, I've seen a couple of instances on IE on a Mac where the menu doesn't render correctly. The page can be viewed here. On the problem browsers, the top menu items will be displayed in two stacks, rather than across the bottom of the image. If anyone out there has any idea why this is happening, I'd appreciate the help. The menu code in the HTML: Code: <table border="0" width="665" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0"> <tr> <td width="100%" align="center" valign="top"> <ul class="topmenuul" id="dmenu"> <li class="topmenuli"><a href="home.htm" class="topmenutitle">H O M E</a> </li> <li class="topmenuli"><a href="weddings.htm" class="topmenutitle">W E D D I N G S</a> </li> <li class="topmenuli"><a href="#" class="topmenutitle">P O R T R A I T S</a> <ul class="submenuul"> <li class="submenuli"><a href="authors.htm">Authors & Artists</a></li> <li class="submenuli"><a href="families.htm">Families</a></li> <li class="submenuli"><a href="musicians.htm">Musicians</a></li> </ul> </li> <li class="topmenuli"><a href="solo.htm" class="topmenutitle">S O L O</a> </li> <li class="topmenuli"><a href="#"class="topmenutitle">E M M A</a> <ul class="submenuul"> <li class="submenuli"><a href="bio.htm">Bio</a></li> <li class="submenuli"><a href="press.htm">Press</a></li> <li class="submenuli"><a href="contact.htm">Contact</a></li> </ul> </li> </ul> </td> </tr> </table> The CSS for the menu: Code: .topmenuul{
list-style-type:none;
margin: 0px;
padding:0px;
}
.topmenuli{
list-style-type:none;
float: left;
margin-left: 10px;
/* border-left:1px solid #000000; */
/* border-right:1px solid #000000; */
padding: 0px;
color: #000000;
}
.topmenutitle{
display:block;
color:#000000;
}
.topmenuli a:link {
color: #000000;
}
.topmenuli a:visited {
color: #000000;
}
.topmenuli a:hover{
display:block;
padding-top: 1px;
padding-bottom: 1px;
text-decoration:none;
color:#cccccc;
background:#fff;
width: 120px;
}
.submenuul{
list-style-type:none;
position:absolute;
margin: 0;
padding: 0;
display:none;
color:#000000;
}
.submenuli a{
display:block;
padding-top: 1px;
padding-bottom: 1px;
width: 120px;
text-decoration:none;
color:#000000;
background:#fff;
margin-top: 1px;
}
li:hover ul, li.over ul{ /* lists nested under hovered list items */
display: block;
}
#dmenu li>ul {
top: auto;
left: auto;
}
#content {
clear: left;
}
-->
#dmenu {
font-family: Georgia, Helvetica, Sans-Serif;
font-size:10px;
text-align:center;
font-color: #000000;
}
.topmenutitle {
background:#fff;
text-indent:0px;
text-decoration: none;
padding:0px;
padding-top: 1px;
padding-bottom: 1px;
color:#000000;
width: 120px;
}
.submenuul {
background-color:#fff;
background-position: top left;
}
.submenuli a{
text-decoration: none;
color: #000000;
padding-top: 3px;
padding-bottom: 3px;
}
.submenuli a:link{
color:#000000;
}
.submenuli a:visited {
color:#000000;
}
.submenuli a:hover{
text-decoration: none;
background:#fff;
color: #cccccc;
padding-top: 3px;
padding-bottom: 3px;
}
Hi, Trying to get my website to work in IE7. Got to collumns. Side bar and main content. It works fine in firefox, opera and chrome but not in IE7. In IE7 the main content doesn't appear next to the side bar, instead its at the bottom the pade. The site is at accentibrass dot com If anyone has any ideas they'd be much appreciated! thanks If you look at my page here in IE and Firefox, you'll see that the footer is stretched in IE. It's barely showing the image, but flooding over into the center of the page. I have no idea why it'd be doing this. View in IE View in FF Here's the CSS used : Code: #footer {
background: #49515C url(img/header_right.gif) no-repeat 100%;
border-bottom: 5px solid #fff;
border-top: 10px solid #fff;
text-align: center;
color: #fff;
font-size: 0.8em;
padding: 10px;
line-height: 16px;
clear: both;
}
Can anyone see a problem? |
|||||||