|
CSS - Weird Creeping Text
Hey everyone,
I made a site and it seems to have creeping text. On position is everything it says creeping text is caused by a left border and a bottom padding on nested block elements. If I try to highlight the creeping text(ng. or g.) it will highlight the word I think it's creeping form just above where it says wiring. I don't know how to fix it. If anyone has any sugestions that would be great. I can post more code if needed. The header is a div within an inner warper div which is within a wraper div. I need the extra divs to centre the page within the browser. Code: CSS
#header{
float:left;
clear:none;
width:800px;
height:160px;
border-bottom:1px solid #323132;
}
#header a{
float:left;
clear:none;
}
#header img{
float:left;
clear:none;
border:0;
border-right:1px solid #323132;
}
#header-right{
width:583px;
overflow:hidden;
float:left;
clear:none;
}
#header-right img{
border:0;
border-bottom:1px solid #323132;
}
#slogan{
vertial-align:middle;
float:left;
clear:none;
font-size:15px;
padding-left:2em;
font-stretch:wider;
width:583px;
padding:0;
height:20px;
margin:11px 0 11px 2em;
}
#slogan span{
float:left;
clear:none;
font-variant:small-caps;
font-size:normal;
font-weight:bold;
color:#e6242c;
font-stretch:normal;
}
PHP Code: <?php if($page) { $topImg = "images/tops/$page-top.jpg"; } else { $topImg = "images/tops/index-top.jpg"; } ?> <div id="header"><!-- width="800px" height="160" border="0" cellpadding="0" cellspacing="0"--> <!--<a href="/">--> <img src="images/logo.gif" alt="Moorhouse Media Tech logo."> <!--</a>--> <!-- SPACER IMAGE <img id="toptagline" src="images/top-tagline.gif" width="1" height="160" alt="Moorhouse: The new sta ndard in home wiring."></td> --> <div id="header-right"> <img id="top-img" src="<?php echo $topImg . "\" alt=\"" . $page; ?> of Moorhouse.(Decorative Image)" > <!--<img id="tagline" src="images/top-tagline-05.gif" alt="Moorhouse: The new standard in home wirin g.">--> <p id="slogan" style=""><span>MOORHOUSE</span>: The new standard in home wiring.</p> </div> </div> Unfortunately no matter what I do all the ports scanners I've used say that my port 80 is in stealth mode(no response to and SYN packets) so I can't show you a live version of my site. Attached is a screen shot. [edit] I fixed the g. but the ng. still exists. The g. was caused by the commented out image in the PHP code just above the slogan <p> element. I fixed them all, it was caused by the comments. I forget what the fix for that was but I just removed the unnecessary comments. Similar TutorialsIf you look here the bottom image (of 2 pcs) is creeping out of the <p> it's in! Compare it with this page to see exactly what it's doing. I've had an issue in the past where the background image creeps, or hangs, when resizing the window. To explain what I mean, check out this page: http://ridersresto.com/ this is the background image: http://ridersresto.com/images/main_bg.gif when you slowly resize the image, you will notice the background image on both sides of the page closing and opening a 1px gap. here is the CSS for the BG image: Code: body {
margin: 0;
padding: 0;
background-color: #131313;
color: white;
background-image: url(http://ridersresto.com/images/main_bg.gif);
background-attachment: fixed;
background-repeat: repeat-y;
background-position: top center;
}
.frame {
margin: 0 auto 0 auto;
padding: 0;
width: 778px;
background-color: #000000;
color: white;
}
Code: <body> <div class="frame"> </div> </body> Is there a more efficient way of accomplishing this effect? OK, this is a new one to me. I'm building my first CSS-only site, and am quite happy with the way it's going, but have discovered something quite odd today. When viewed with IE, the browser handles text selection VERY oddly, not allowing users to highlight a block of text to, say, copy to the clipboard. Try it yourself: http://www.theatrebayarea.org/v2/ Any idea what this is about? It's not a huge bug, but I'd like to be able to fix it. Needless to say, non-IE browsers handle it fine. -D Hi im new, I've got a problem and I'm stumped as to why it's happening. I've got several lists on my page with link items. They all work fine, but when I hover over the links in my navbar in chrome and safari, the cursor turns to a text one rather than a hand. This means I can't actually click on the link. However, there are other lists on the page that work fine, and they all work in Firefox. Does anyone know why this is occurring? You can view the pages he andrewcharlton.co.uk/gaming_and_gambling2/ggbusinessplans.html (Can't seem to post a proper link as I am a new user) It's the about, contact links in the header that dont work. hmm. Would be grateful if anyone knows the answer. Thanks! Hey everyone, I have an odd problem. CSS Code: Original - CSS Code ul#admin_menu li.am_item{ float:left; clear:none; display:inline; border:0; padding:0; margin:0; width:24%; }
ul#admin_menu li.am_item{
This works... CSS Code: Original - CSS Code li.am_item{ float:left; clear:none; display:inline; border:0; padding:0; margin:0; width:24%; }
li.am_item{
This doesn't work... I don't understand why. What gave it away was the display:inline; The first one displays them inline, the second displays them block and they don't get their width. omg I am going to fall from the window with this stupid language lol... Until yesterday, I was designing properly my site, using css and linking it in my php properly andddddddd.......... today I noticed a weird result. When I change something in css, I can see no result in the site. Even if I delete code from css, the site seems to be cached! I use Mozilla, I tried to clean cache, the css is properly linked... whats going on now Have anyone else faced a similar problem?... Hello, I have a free text search with auto suggestion that opens below the input box. I finally managed to make it look good in all browsers, but I have one problem left in IE - when the auto suggestion div opens with the options and I press the down arrow to move down the list, there is a little jump. You can see it by going to : bateries.websitebuildingsolutions.com in IE and enter "b1" in the search box, wait a second for the div to open and than press the down arrow to move down the list. What can I do to fix this? Thanks I have a basic 2 column layout with a header and the columns reprezented by two floated divs but on IE I'm experiencing some weird behaviour with the menu. To be precise the menu's background and content is not showing up at pageload and I have to hover some of it's elements or resize the window, or bring another window above IE's window and then the hidden elements magically appear. Is this some common bug? And more important: is there a fix? You can see my example at the following link -> http://www.link7.ro/misc/css-stuff/bug1/test.html Thanks in advance. if you check out this website you'll immediately understand what the problem is about. The script I wrote, pulls pictures out of a database and displays them. I have a print feature (click the link that says: Ik wil de klassenlijst van **** afprinten). With Css I check wether or not a picture can be displayed on this page or if it has to be forced onto another page, when printed. Code:
<style type="text/css" media="print">
table {
page-break-befo auto;
}
</style>
When you check the webpage, you'll notice this row gives problems in IE. When I print the page from Internet Explorer: this row shows on the page, but not the picture that goes along with it. When I print the page from Mozilla: this row does not show on the page, neither the picture that goes along with it. as it should be Can someone help me? It is very important that the pagebreak is automagically forced when printed, because I can't guess the format on which people will print. Hi, I'm trying to display text in a floating div in the middle of the page. The style is as follows: Code:
.mainContentAreaBackground {
position:absolute;
z-index:11;
top: 190px;
left: 230px;
width:70%;
height:72%;
}
#mainContentArea{
z-index:12;
position:absolute;
overflow:auto;
overflow-x:hidden;
width: 67%;
height: 68%;
top:205px;
left:246px;
text-align:left;
font-family:Tahoma;
font-size:10.0pt;
visibility:visible;
}
There are two anomalies which I think might be bugs in IE's implementation of CSS, and I was hoping someone might be able to give me some advice as to how to get around them. The first problem is that, when going to highlight text in the main content area, all objects on the page are selected, rather than just the intended text. The second anomaly is that, when using the mouse wheel to scroll down in the mainContentArea div when there's overflow, the cursor needs to be hovering over text. If it's hovering over any place with a "hole" in it, such as the space between paragraphs, then it will not scroll. Everything works fine in Firefox. You can see what I'm talking about he http://www.cs.mcgill.ca/~jbeard4/lepdev If anyone has any advice, please let me know. Thanks! -Jake Hey, at my site: http://www.optimumnutrition.com/products in IE/6 I am having a problem with the last side box in the left column. You can see a gap between the link to conditions of use and the curved bottom of the box. Anyone see where this is coming from? Thanks, Ryan Hey gang, quick question. I'm tring to make a "Thermometer" of sorts for my site, and instead of making lots of images in photoshop, I figured I could do it a little more dynamicly using divs and css. I was right, as Firefox displays my code perfectly, however, IE messes up the whole thing by keeping the allocated space for the one div in the place where its positioned in the code. Dumb thing. I figure it has something to do with the display property, but I'm not sure which to use. Any suggestions? Thanks! PHP Code: <div style="height: 500px; width: 100px; padding: 0px; margin: 0px; border: 0px black solid; background: url('meter_color.jpg');"> <div style="position: relative; top: 0px; left: 0px; height: 125px; width: 100px; padding: 0px; margin: 0px; background: #FFFFFF; z-index: 1;"></div> <div style="position: relative; top: -125px; left: 0px; height: 500px; width: 100px; padding: 0px; margin: 0px; background: url('mask.gif'); z-index: 2;"></div> </div> (images attached) -Jim The border around the fieldset in IE7 is messed up. The right border is shifted to the left several pixels. It looks fine in IE6. In FF the border isn't shifted but there is less padding on the right side of the fieldset than the left. I can't figure that one out either. If I zero out all the padding & borders the input/textareas push a few pixels out the right side of the fieldset. Looks fine in IE6. So has anyone seen either of these issues and might know how to correct them? Here is the page in question Thanks! I've got a body of text within a DIV tag. For some reason, if I roll my mouse over the text, the entire body of text changes color as if it were a link. I've double checked to see if there are any open HREF tags but there are none. Any ideas? Safari 1.3 on Mac OSX 10.3.9 if it matters. I've also tested on Netscape, Opera, Firefox and IE and all of these work fine. here be the code: Code: .mainBody {
color: #000;
font-family: helvetica, arial, "sans serif";
font-size: 12px;
text-align: justify;
padding-left: 35px;
padding-right: 35px;
}
.mainBody:link, .mainBody:visited {
color: #600;
text-decoration: underline;
}
.mainBody:active, .mainBody:hover {
color: #996600;
text-decoration: none;
}
.pageLinks {
color: black;
font-family: helvetica, arial;
font-size: 14px;
text-align: center;
}
.pageLinks:link, .pageLinks:visited {
color: #960;
text-decoration: underline;
font-size: 14px;
}
.pageLinks:active, .pageLinks:hover {
color: #960;
text-decoration: none;
font-size: 14px;
}
So I have the following website: http://www.itmustbecollege.com/ and it has a problem SOMEWHERE that I can't seem to figure out. The problem is that all of my pages now have a big "space" on the far right, forcing a huge horizontal size. I have tried to debug but can't seem to find out the exact problem. It is weird, because certain parts of the website have a "width: 100%" yet ENDS at the correct look, yet there is still that huge space! I am redesigning this site in a css layout, and I've had minimal problems so far, but IE:mac (of course) is doing some weird things. Example One: The header of the search box is stretching to the right, when the googleads box is floated right. Eample Two: The ul in the left side bar is placing the bullets outside of the wrapper and is aligned to the left side of the browser. The rollovers have also been slow in other browsers. These are my two main issues. If there are any other suggestions as to how I could lay this out more efficiently, it would be much appreciated. Thanks! Site CSS Hi there! Please have a look here. As you can see there's a scrolling box with a overflow:auto propriety set. All works well either in Firefox and Internet Explorer, but I had to use a hack to made it work with IE: Code:
#content {
position: relative;
margin-left: auto;
margin-right: auto;
padding-right: 25px;
padding-left: 25px;
font-family: Verdana,Arial,helvetica, sans-serif;
font-size: 11px;
text-align: justify;
overflow: auto;
width: 543px;
height: 225px;
background-image: url(img/centerblank.jpg);
background-repeat: no-repeat;
_background-attachment: fixed;
}
FF doesn't read the _background-attachment so all works fine.. problem is, this way the css code is no w3c compliant. Any ideas? Well this is VERY weird. I don't even know what to do about this one. Take a look at this site in IE... FIXED Now notice the footer at the bottom. For me every couple times I refresh it the whole page goes out of whack... and then a couple refreshes later it seems ok again. I can't honestly figure out what is going on here. Hello. I've got a header div that my banner is in, below that, another div called "welcome". The background-color I set on the welcome div is somehow appearing at the very top of the container, right above my banner... I've tried adding a height to it but that just makes it worse. Not sure what else to do... The site is LeetWebmasters. My css: Code: p {
margin:0px;
padding:0px;
color:#006699;
line-height:20px;
}
h2 {
padding:0px;
margin:0px;
font-size:24px;
color:#006699;
font-weight:100;
border-bottom:1px dotted #ccc;
}
h3 {
padding:0px;
margin:0px;
color:#006699;
color:#006699;
}
html,body {
padding:0px;
margin:0px;
background-image:url(main-bg.gif);
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#container {
margin: 0 auto;
width: 922px;
}
#header {
width: 922px;
float: left;
height: 130px;
margin: 10px 0px 5px 0px;
}
#leftcolumn {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background-image:url(col_gradient.jpg);
margin: 0px 5px 5px 0px;
padding: 10px;
height: 900px;
width: 195px;
float: left;
}
#welcome {
text-align:center;
padding:5px;
background:#EAEAEA;
color:#006699;
}
#latest_tuts {
color:#006699;
}
#latest_tuts h3 {
border-bottom:1px dotted #ccc;
}
#who_online h3 {
border-bottom:1px dotted #ccc;
}
#search {
position:absolute;
margin-top:0px;
margin-left:0px;
}
#newsletter {
position:absolute;
margin-top:0px;
margin-left:0px;
}
#welcome a:link {
color:#0066CC;
}
#content {
color: #333;
margin: 0px 5px 5px 0px;
padding: 10px;
width: 456px;
display: inline;
float:left;
background-image:url(content_gradient.jpg);
}
#content a:link, a:visited {
color:#0066CC;
}
#rightcolumn {
color: #333;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background-image:url(col_gradient.jpg);
margin: 0px 0px 5px 0px;
padding: 10px;
height: 900px;
width: 196px;
float: left;
}
#footer {
text-align:center;
width: 900px;
clear: both;
color: #878787;
border: 1px solid #ccc;
margin: 0px 0px 10px 0px;
padding: 10px;
height:35px;
font-size:12px;
background-image:url(footer_gradient.jpg);
}
#footer a:link {
color:#0066CC;
text-decoration:none;
}
#footer a:visited {
color:#0066CC;
text-decoration:none;
}
#footer a:hover {
color:#006699;
}
#menu3 {
width: 200px;
border:1px solid #BCD2E6;
border-style: solid solid none solid;
}
#menu3 li a {
height: 24px;
text-decoration: none;
}
#menu3 li a:link, #menu3 li a:visited {
color: #8BADCF;
display: block;
background: url(menu3.gif);
padding: 8px 0 0 10px;
}
#menu3 li a:hover {
color: #627EB7;
background: url(menu3.gif) 0 -32px;
padding: 8px 0 0 10px;
}
#menu3 li {
list-style:none;
}
#menu3 ul {
padding-top:0px;
margin-top:0px;
padding-left:0px;
margin-left:0px;
margin-bottom:0px;
}
#description {
font-size:10px;
color:#006699;
}
|
|||||||