|
CSS - Random Problem While Posting Values
Hello all!
I wasn't sure where to post this since I don't know where my problem lies, in css or php. In a nut shell, when displaying values from mysql database in a css div, the data is displayed correctly 9 times out of 10, but there is always that one time it is messed up. Thank you for your help. Let me know if you need to take a look at my code (it is pretty lengthy to be posted on here). Similar TutorialsI have divs within Divs to make background colour different to suit the template am making. Code: /* Document : default Created on : 18-Oct-2011, 10:25:09 Author : abeattie Description: Purpose of the stylesheet follows. */ /* TODO customize this sample style Syntax recommendation http://www.w3.org/TR/REC-CSS2/ */ a { text-decoration: none; color:white; } root { display: block; } html { background-color: black; } #container { width: 800px; background: black; margin: 3em auto; } #header { overflow: hidden; height: 100% /* IE6 hack */ } #header img { margin-top: 2px; float: left; } #header ul#nav { float:right; font-size: 16px; position: relative; margin-top: 20px; } #nav li { display: inline; padding-right:27px; } #nav li a:hover{ color: white; text-decoration: underline; } #WhatsNew{ background: white; } #WhatsNewtitle{ color: white; margin-bottom: -30px; } #pictureinfo img { float:left; border: 2.5px solid black; margin-top: 5px; margin-left: 5px; margin-right: 5px; } #pictext { margin-top: -19px; float: right; width: 350px; height: 228px; } div.buttons { margin-top: 37px; color: white; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 2.5px; margin-left: 115px; width: 70px; background: black; position: relative; }
that above is the css and below is the html. my problem is that one of my divs what is inside another div seems to be spilling out. http://imageshack.us/photo/my-images/811/unledtm.jpg/ as you can see the recent posts is taking up both the image and the text next to the image but that div is meant to be below and i have tryed everything i can think of. here is html. Code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="default.css" type="text/css"> <title></title> </head> <body> <div id="container"> <div id="header"> <img src="images/logo.png" alt="Black & White" /> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </div> <!-- end header--> <div id ="WhatsNewtitle"><h1>What's New</h1></div> <div id="WhatsNew"> <div id="pictureinfo"> <img src="images/whatsnew.png" alt="Estore"/> </img> <div id="pictext"> <p> <h2>Project Title</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. usce ligula sem, aliquam eget tincidunt vitae, rutrum sed ligula. Maecenas iaculis volutpat sem, a luctus odio commodo in. Cras sollicitudin nisl vel leo vulputate in dictum purus aliquet. Sed sed justo odio, sit amet sollicitudin enim. Vestibulum ante ipsum primis in <div class="buttons"><a href="#"> Prev </a>|<a href="#"> Next</a></div> </p> </div> </div> </div> <div class="recent posts"> <h2>Recent Posts</h2> <div class="post"> <h2>Post Title</h2> <div class="postinfo"> <ul> <li><a href="#">Author</a></li> <li><a href="#">Date</a></li> <li><a href="#">Category</a></li> <li><a href="#">Tags</a></li> <li><a href="#">Comment Count</a></li> </ul> <h2> 5 </h2> <img src="images/whatsnew.png" alt="Estore" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ligula sem, aliquam eget tincidunt vitae, rutrum sed ligula. Maecenas iaculis volutpat sem, a luctus odio commodo in. Cras sollicitudin nisl vel leo vulputate in dictum purus aliquet. Sed sed justo odio, sit amet sollicitudin enim. </p> </div> <!-- end post info --> </div><!-- end post --> </div> <!-- end recent posts --> </div> <!-- end container--> </body> </html> i hope i have explained enough for someone to help but if not am sorry. thnaks in advanced beattie You would need to look in Internet Explorer (probably on windows) for the bug to show up. I've posted in css, because I assume it's something to do with css, but I guess it could be something else. The stylesheet for the page can be found here... http://estore.e-av.co.uk/stylesheet.css I realise there are various other errors on these pages still, but hey, it's a work in progress. It's really weird, if you click around through the pages, about 50% of the time, a white block seems to get drawn over the left and right hand menus (actually, I'm assuming it's over everything, but behind the main content). It follows no pattern, and if you move your cursor over it, it will redraw. It's so weird, and if it was any other browser, I would ignore it - but it's i.e. on windows, the most heavily used browser out there, so I've got to fix it somehow. Has anyone come across this before and managed to fix it?? Anyone got any ideas at all?? Any advice at all would be very much appreciated. Thanks in advance... Hi, I own a Web Hosting company, though despite my knowledge of CSS coding, I cannot for the life of me find out what CSS script is causing a problem on my site. If you visit my site, dim-wit.com, you'll see that there is a horizontal bar at the bottom of the page. I can't get rid of it. If you can help, any suggestions would be welcome. Thanks in advance. So, I've been branching away from the php forum, and trying to help out here, and I have several annoyances about the way people post... so I was wondering if we could put up a sticky (I know a lot of people wouldn't read it anyway...) about how to post in the css forum... I was going to send this via PM to the mods, but I didn't want to overstep my bounds. Things to be covered... 1 - Before you post your question, make sure your code and css validates! 2 - If you are providing a link to your page, make it an actual link. 3 - If your css isn't embedded, provide a link to it too, or paste it. Along with the usual things... 4 - Be descriptive... what do you think it should look like, what's it look like now, what's it not doing "right"... it's amazing (I'm guilty too) how many people post a "look at this, how do I fix it?" but we don't know what it's supposed to look like. I'm sure there is more... sound off! CSS Forum Posting Guidelines Some very important things to keep in mind before you post your question: Note that if it appears you haven't read this, we're most likely just going to point you to it. BEFORE YOU POST Before you post your question, make sure your X/HTML and css validates! Visit w3.org to validate your X/HTML and css, if you don't, that's the first thing we are going to ask you to do. Invalid X/HTML and/or css gets unpredictable results. X/HTML Validator CSS Validator Here is a sample template you can use to make sure your test code is fully functional: 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>
<!--Don't add anything above this line, you may change the DTD to match your page-->
<title>Test Page</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<!--Uncomment the following line and remove the embedded style sheet if your style is external-->
<!--<link rel="stylesheet" href="includes/style.css" type="text/css" />-->
<style type="text/css">
/*add your styles here, or remove this section if your styles are external*/
body{
background-color:#ffffff;
}
</style>
</head>
<body>
<!--Put your x/html code here-->
</body>
</html>
USE YOUR RESOURCES As with all forums, there's a pretty good chance your question has already been answered... but css being what it is, you may not know exactly what you are looking for. Have a look at the resources sticky, or try searching for your problem. BE DESCRIPTIVE Spell it out for us. What do you think it should look like, what does it look like now, what is it not doing "right"... It's amazing (I'm guilty too) how many people post a "Have a look at this, how do I fix it?", but they don't tell us what it's supposed to look like. PROVIDE EXAMPLES Give us a link, or paste your code... we can't read minds, especially through the net. If you are providing a link to your page, make it an actual link using the bbcode tags, rather than just pasting the URL. If your css isn't embedded or inline, provide a link to it too, or paste it if it's not too big. USE A DESCRIPTIVE TOPIC NAME Topics which are simply... CSS Problem Please Help IE not working! Won't get many responses, try and come up with something a little more descriptive... Getting rid of space around floated divs in IE My footer won't stay at the bottom By the way, these are examples of problems that can be searched for... ALL PROBLEMS, BIG and SMALL Remember that the C in CSS stands for cascading, upper level elements have an effect on the lower level elements... If you have a large css sheet and a lot of code on your site, and one thing isn't working the way it should, chances are something else is interfering... try simplifying your code and see if it will work that way... An old debugging technique is to break it down into smaller portions in order to isolate the problem... Mod edit: Stickied, locked and posts removed. If anyone has anything they'd like to add to this guide, please feel free to PM me and I'll add it if needed. Thanks, Jon. for reference the two pages a 1) www.yahn.org/default.php 2) www.yahn.org/register.php ok both pages have 4 divs - div.main which has 3 divs inside of it. div.mainnav div.maininfo div.rightnav. the css for the divs is this Code:
div.main
{
clear: both;
font-family: verdana;
display: block;
}
div.maininfo
{
width: 60%;
display: block;
float: left;
margin-left: 2px;
}
div.rightnav
{
display: block;
float: right;
width: 18%;
}
div.mainnav
{
display: block;
float: left;
width: 20%;
font-size: 10px;
}
if you add up the widths its only 98%. yet on one page the div.rightnav gets dropped down and on the main page it doesn't. can anyone tell me how to fix this or why it is happening? I am trying to position the background image of a td with a random x value. I was trying to call a js randomizing function, had no luck. Is there any way to do this? Heres what I have, I need that -125px value to be random. .bg2 { background: url(testbg1.jpg) repeat -125px 0px; } If you go to the following http://curley-construction.com/cc/ in IE6, you'll notice a break in the footer. I cannot for the life of me figure out why its being added in IE6, but not IE7 or FF.... I"ll post the HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Small Business Credit Cards</title> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <link rel="stylesheet" href="layout.css" type="text/css" /> <!--[if lte IE 6]> <script type="text/javascript" src="supersleight-min.js"></script> <![endif]--> </head> <body> <div id="pagewidth"> <div id="header"></div> <div id="wrapper" class="clearfix"> <div id="belowHeader"></div> <div id="maincol"> <div id="maincolInner">Main Content Column </div> </div> <div id="leftcol"> <div id="leftcolInner">Left Column</div> </div> </div> <div id="footer"> <div class="top"></div> <div class="content"></div> <div class="bottom"></div> </div> </div> </body> </html> ..and the CSS from layout.css Code: * { margin:0; padding:0; border:0;} html, body{ margin:0; padding:0; text-align:center; background: #E2EBF0 url(images/BG.jpg) repeat-x top; } #pagewidth{ width:1036px; text-align:left; margin-left:auto; margin-right:auto; } #wrapper{ background: url(images/pageBG.png) repeat-y; } #header{ position:relative; height:131px; background: url(images/header.png); width:100%; } #belowHeader{ background: url(images/headerBtm.jpg) left no-repeat; height: 36px; width: 297px; margin-left: 17px; } #leftcol{ width:166px; float:left; position:relative; padding-left: 17px; } #leftcolInner{ background-color: #000; } #maincol{ float: right; display:inline; position: relative; width:835px; padding-right:18px; } #maincolInner{ background-color: #555; } #footer{ clear:both; } #footer .top{ background:url(images/footerTop.png) no-repeat; width:1036px; height:13px; } #footer .content{ background:url(images/footerBG.png) repeat-y; padding:0; margin:0; width:1036px; /*padding: 20px;*/ } #footer .bottom{ width: 1036px; background:url(images/footerBtm.png) no-repeat; height:41px; } /* *** Float containers fix: http://www.csscreator.com/attributes/containedfloat.php *** */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix{height: 1%;} .clearfix{display: block;} /* End hide from IE-mac */ /*printer styles*/ @media print{ /*hide the left column when printing*/ #leftcol{display:none;} #twocols, #maincol{width:100%; float:none;} }
Any clue on this? Thanks in advance! I've been designing a template for my phpBB install to make it integrate with my site better, and what I have so far I like, but I noticed one small problem. I'm not sure if it's a bug in mozilla or what the cause is, but at random times my Author details column will take up 100% of the screen with, when it's defined via css to only take up 12%. A simple reload is all that is required to fix it, but it can be quite annoying when it happens. The problem only seems to happen on the post view, which is available he http://kicken.mine.nu:8008/forums/viewtopic.php?t=4 It seems I have more luck getting it to happen if I start clicking around between the Home page and the post view, or from the index to a post view. I havn't had access to any browser other than mozilla to check things in either, so I'm not sure what results will show in other browsers. I am experiencing some random CSS layout issues. When I VPN into my work and view the website the layout will sometimes break. However when I refresh the page this will fix it most of the time for that page only. If I browse to another page and come back to the original page, it is broken again. This only happens when I am not on the internal network. When I am on the internal network the entire site looks fine and works like it is suppose to. Anyone know of any neat tricks to solve this kind of problem? It is mainly the CSS background-images that are being placed 10 or so pixels from where they belong. How can I randomize text size on a website? Like the ones done with the "tags" found on many wordpress blogs? Nothing too crazy, I just want to display words randomly and have some of the text bigger than others. In both FF and IE, my site http://niosis.awardspace.com/polend.html doesn't display right. Look at the link below to see exactly how it is supposed to look. Here is how it is supposed to look: http://niosis.awardspace.com/tempsliced.html but of course that uses tables so I'm fixing it, and as you could see in the previous link having problems doing so. and if you think it looks bad in Firefox, just open up internet explorer and take a look at it. ewww.... Anyways, thanks in advance to anyone who can help me. The XHTML Validates strictly. Separately, they both work perfectly. The css-script for a beating heart does what it should do: feature a beating heart (or rather, image of a heart). The random background cycling script chooses a new background every 10 seconds. However, put together, they still work, only every 10 seconds, the screen blinks black (the background cycler does not feature a transition on its own), both the background and the heart (and everything else on screen) blink out of existence for a split-second and then everything is back again. I've managed to determine, despite knowing absolutely nothing about CSS and JS except for what little I've learned today through tinkering with the scripts, that if I remove the variable "infinite", the heart will beat only once after each transition and the blinking glitch will not occur, so it has something to do with that. <b>What I want is this:</b> A heartbeat animation that's infinite with a background that cycles through a set number of backgrounds every X seconds without any kind of transitions or blinking effects. The heartbeat CSS-script: Code: }
.heartbeat {
width: 50px;
-webkit-animation: beat 1.0s ease-out infinite normal;
}
@-webkit-keyframes beat {
0% {
-webkit-transform: scale(1.0) rotate(0deg);
}
65% {
-webkit-transform: scale(1.1) rotate(0deg);
}
75% {
-webkit-transform: scale(.9) rotate(0deg);
}
100% {
-webkit-transform: scale(1.0) rotate(0deg);
}
}
The background cycler (html-file): Code:
<?xml version="1.0" encoding="UTF-16"?><html><head>
<script src="configuration.js"></script>
<script type="text/javascript">
document.write('<style type="text/css">body{background: black url('+WALLPATH+((Math.floor(Math.random()*WPNUM))+1)+'.'+IMGTYPE+');}</style>');
setTimeout("window.location.reload(false)",CHANGELENGTH*60*1000);
</script>
</head></html>
The background cycler (js-file): Code: var WPNUM = 2; var WALLPATH = "Wallpapers/"; var IMGTYPE = "png"; var CHANGELENGTH = 0.1; I've just been given the assignment to write a script that given a set of form elements by the user it will create a page with those form elements displayed and a submit button on the bottom. The form elements the user defines can be text fields, text areas, dropdown boxes, option groups, and checkboxes. The user also gives me a title for each form element. He can give me these form elements in any order and I need to display them in that order on the page. My question is, how do I arrange these form elements so they always look good together and I don't have funny gaps or unprofessional looking design? It would be easy if it was just text fields and area, but then I have to throw in option groups and checkboxes that can be any number in a row. Does anyone have some good form organization rules that could help me? Thanks!! What are all of the properties does ie not support the auto value for? I know width and height are a couple, anymore? I have read the other topics on the height and I have worked out a compromise in IE where I can set the height of my Divs in pixels, as I want the columns to align up at the bottom. However I would prefer it if the height was relative to the browser resolution which is what I have in Firefox by using % instead of pixels. Is there a way I could make IE use % at all? Here's the CSS concerned. Code:
#centercontent {
position: absolute;
background:#fff;
width: 78.3%;
height:auto;
min-height: 80%; /* works in FF, not IE */
margin-left: 19%;
font-family: Verdana, helvetica, Arial, Tahoma, sans-serif;
padding: 6px;
}
/* for Internet Explorer */
* html, #centercontent {
height: 600px;
}
Here's something I ran into today, that I'd never seen before. Here's the page as it SHOULD be -- http://www.globalmedical1.com/index_826.cfm with the paragraph text small enough not to expand the graphics, but I heard from a friend that on HIS browser (not sure how his settings were), it looked like THIS: http://www.globalmedical1.com/index_825.cfm http://www.globalmedical1.com/gmerror.jpg (To achieve the look for the file link, I gave it a <font size> command after the calling in the <div> property of the paragraph text. The image was actually how it looked. On his system, apparently, it didn't seem to pick up the CSS value I had set for the paragraph, which was .demo { font-family:tahoma; font-size: 8pt; color:061D71; } How can it make a font size of 8pt THAT big ? I'm pretty sure there isn't a way to do this, but i am curious.. I know that i could answer the first question if i had a printer that wasn't out of ink .. but here goes. First: Are CSS attributes that are assigned to the media Screen inherently assigned to Print even if you point the Print media a different stylesheet? Second: Is there a way to clear a stylesheet values? basically making the stylesheet null or empty? Hey all, I'm working on a collapsable menu thing, and the CSS is just getting ugly. I'm basically rewriting this fantastic little thing. Code:
<dt class="m_an" onclick="javascript:show(\'m2\');">Menu 2</dt>
<dd id="m2">
<ul>
<li><a href="x">M 2.1</a></li>
<li><a href="y">M 2.2</a></li>
</ul>
</dd>
<dt class="m_my" onclick="javascript:show(\'m3\');">Menu 3</dt>
<dd id="m3">
<ul>
<li><a href="1">M 3.1</a></li>
<li><a href="2">M 3.2</a></li>
</ul>
</dd>
The css: Code:
#menu {}
#menu dt
{
margin: 2px 0;
height: 20px;
line-height: 20px;
text-align: left;
padding-left: 10px;
font-weight: bold;
border: 1px solid gray;
}
#menu dd
{
border: 1px solid gray;
}
#menu li {
text-align: left;
padding-left: 20px;
background: #fff;
}
#menu li a, #menu dt a
{
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu dt a:hover
{
background: #eee;
}
.m_an { background: #3cf; }
.m_my { background: #6f3; }
Now, what I'm trying to do is to get m2 and m3 (and the four or five others) to have different colored a:hovers. Thing is these pseudo-selector things screw with my head. Also, is there anyway I can fix up this rather spaghetti styled css and make it more elegant? Thanks heaps, Simon I'm animating an element and have tried to do a simple css transition in jquery $("#myelement").css('top','100'); But it wont respond unless that value is 0. I've been using these for months and suddenly 'top' and 'left' no longer respond to JS. |
|||||||