|
CSS - Blockquote Style Debugging
i have a question about blockquote styles. its being used in my blog: http://www.insanityonline.blogspot.com/
this is the css thats used: Code:
blockquote {
margin: 0 0 0 30px;
padding: 10px 0 0 20px;
font-size: 88%;
line-height: 1.5em;
color: #666;
background: url(http://www.blogblog.com/tictac/quotes.gif) no-repeat top left;
}
ok i made 2 new images of smaller quote marks and rotated. now is there a way to get say the pics to have one in the top left AND bottom right as the words were in a quote?? Similar TutorialsI dont understand why form at the following address take blockquote's background. http://refinethetaste.com/html/cp/?Section=stats&Process=ViewStats Code: Code: <form action="" method="post">
<fieldset class="width50">
<div class="row">
<label for="DateRange">Date Range</label>
<select name="DateRange" class="width50">
<option value="Today" selected="selected">Today</option>
<option value="Yesterday">Yesterday</option>
<option value="Last24Hours">Last 24 Hours</option>
<option value="Last7Days">Last 7 Days</option>
<option value="Last30Days">Last 30 Days</option>
<option value="ThisMonth">This Month</option>
<option value="LastMonth">Last Month</option>
<option value="AllTime">All Time</option>
</select>
</div>
</fieldset>
<fieldset class="width50">
<input type="submit" value="Go" class="button" />
</fieldset>
</form>
<blockquote>
<p>
<div id="placeholder" style="width:100%;height:300px"></div>
</p>
<script>
$(function () {
// a null signifies separate line segments
var d1 = [[1,38],[2,132],[3,41],[4,3],[5,291],[6,62],[7,31],[8,33],[9,125],[10,0],[11,0],[12,0],[13,0],[14,0],[15,0],[16,0],[17,0],[18,0],[19,0],[20,0],[21,0],[22,0],[23,0],[24,0],[25,0],[26,0],[27,0],[28,0],[29,0],[30,0],[31,0],];
$.plot($("#placeholder"), [d1]);
});
</script>
</blockquote>
All, I'm running into an annoying thing. Everytime I place an image on either side of something I surround with my blockquote tags, the text within the blockquotes will indent itself to make room for the image, but the border I have specified in the blockquote style does not indent itself with the text, so the image winds up sitting on top of one border. How can I fix this problem so that the border of the blockquote will also move to the side in presence of an image right beside it? Thanks. Hello all, I was almost all done with my web site until I ran into a few surprises in IE... http://pages.infinit.net/emilierv/branding.htm http://www.ervdesign.com/styles.css These are my example pages. I have 2 main problems. First, when I hover on a text link, I mean for its background color changes. In Firefox, this behaviour doesn't seem to be transmitted to images but in IE, it is! This makes a line of color appear when you hover over either arrow buttons. I understand the logic behind this, but I don't know what I can do to exclude images from this behaviour. Second, I have a whole lot of mess going on in the spacing of my text. Both browsers seem to be consistant in the way they display the text but they differ so much from each other. I have some relative positioning going on because I want to keep the numbers (1/7) and the arrow buttons lined up to the coordinates in the nav bar. -IE seems to ignore the fact that the PDF links and the comments are in seperate cells. If I add no space, they overlap! This results in too much space in Firefox. -IE seems to push everything up top as the projects are browsed, resulting in a constant change of height in my arrow buttons. My knowledge of CSS is limited. I really don't know a lot about div, clear, float. I am wondering if my solutions might lie in one of these tags? I would appreciate any help! Thanks a lot, Emilie In my Error console I am getting this: Expected ';' to terminate declaration but found '}'. Declaration dropped Expected declaration but found '-6px'. Skipped to next declaration. Expected ":" but found ";". Declaration dropped Below each error message is a url from the app NOT a style file name and no line number so I assume those are inline style declarations not separate files. I could fix these if I knew how to find them. The -6px is kind of unusual so I found it and fixed it, sure enough it was a typo, but the other errors don't really give me anything I can search for. Please give me some pointer how to debug this. Thanks Hello i created a website for my trainer and i am having pretty much trouble fixing a bug with the menu li:current and the compatability in various browsers. If someone please could check my website for errors and correct them? Its really a small website. I dont know what to do anymore, i tryed so much and nothing seems to work. Thanks in advance. my site is located at Code: http://hexagon.110mb.com/index.html I'm almost finished with my first page, the others should be easier but before moving on, I would like to debug some problems and truthfully I'm not sure where to even begin. I'm ready to debug issues is IE6. It looks nothing like it should. My main menu is vertical and I'm really confused as to why? I know that IE6 does not support fixed footers, so i was curious as to how I could work around that? my embedded video in my #right div in FF overlaps the fixed footer, and putting a z-index on #object did not work? Lastly, I would like to know if there is a way to make my #mainbody div the same size as my #left and #right depending on which has more content. Basically I would like all three the same size at all times. Thanks for your advise http://www.lonniebruhn.com/sitelab LB I've inherited a page that uses CSS and Javascript to drag and drop objects. For reasons unknown, this feature has stopped working. My investigation has determine that there is a CSS error involved: Error in parsing value for 'left'. Declaration dropped. Error in parsing value for 'top'. Declaration dropped. Since this is an inherited page I am not sure what the problem really is but the only references to left and top a Code:
floater = document.getElementById("floater");
.
.
.
floater.style.left = fx;
floater.style.top = fy;
.
.
.
fx = floater.style.left = active_card.x;
fy = floater.style.top = active_card.y;
I'm pretty sure it must be from one or both of these statements. I tried adding +"px" to each just in case but that didn't help (nor did I expect it to because it was working at some point in the past and no, I don't know what may have changed). Not being a CSS expert I need some help debugging this problem. FWIW, here is the "floater" HTML object: Code: <img id=floater src=../cards/large/bottom01.gif class=hidden style="position:absolute"> Any help pointing me in the right direction would be greatly appreciated. I am just wondering if there is a way to simply extend a style rule from one previously defined. For instance, if I have this rule: Code:
.textarea-box {
color: #990000;
background-color: #fff;
width: 375px;
height: 200px;
border: #000 solid 1px;
}
...if I want another text area rule to be the same except for one difference, the height should be 80px, do I have to write the rule out again with a new name, incorporating the new height, or is there some nifty way to just change the height in the new rule? Thanks for help with this. j9 I have a menu bar made up of <a href> elements that have a hover style of:
PHP Code: #mainMenu a:hover { color:#000000; background-color: #66c74c; padding: 1px 4px 1px 4px; margin: 1px 1px 1px 1px; } This will provide a green colored rollover visual as the user moves their mouse over the menu bar. I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code: //--- Simplify setup by creating an array of the menus and hilight ID's --- var menus = ["menu1","menu2","menu3","menu4","menu5", "menu6","menu7","menu8","menu9","menu10"]; function J_hiliteMenu(menu) { //--- first make sure all the menu are hidden and unhilited --- for(i=0; i < menus.length; i++) { if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position var obj = document.getElementById(menus[i]); if (obj == null) continue; // if menu is not available skip it obj.style.color = "#ffffff"; obj.style.backgroundColor = "#234fd7"; } //--- hilite the menu we're interested in --- var obj = document.getElementById(menu); obj.style.color = "#000000"; obj.style.backgroundColor = "#f8f400"; } Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript? Thanks! Hello, In the css below, why I can't set it on the same time? Code:
background: #FFF url(../images/main_bottom.gif) no-repeat bottom ;
background: #FFF url(../images/main_top.gif) no-repeat top ;
I did a web page for a company and it looks fine in ie7 where I tested it. The problem is when viewed in IE6 its like it ignores the sizes I put in. The box appears too big in IE6 and is the propr size in IE7. Is there any way to fix it so it would look the same in IE6 as IE7? How would you go about creating a navbar like the one Red cross uses on the left side for generic website mapping? Red Cross Example Is this pure css with dual images? Or is this done with some effect with other forms of CSS (or even DHTML?) on my site I have a list with the UL Class of threads. I am not good with CSS at all I have this Code:
#threads {
padding:0;
margin:0;
}
#threads li {
list-style:none;
border-bottom:1px dotted #ccc;
display:block;
padding:2px 0px 2px 13px;
background:url(images/sub.png) no-repeat 0 0px;
}
not doing what I want, my site is mypricesavings(dot)com you can see the list on the homepage under Recent Activity, I'd like to make it so that the avatars line up on top of each other and a line between each one like the featured section located on this site, however, without the scrolling. http://demo.colorlabsproject.com/?theme=arthemia-premium thank you for attempting I was reading a tutorial were they always style both <tr> & <td> with the same thing... Is this needed? Or do you just need to style <tr>? Code:
table.navigation tbody tr.odd {
background: #252525;
color: #fff;
}
table.navigation tbody tr.odd td {
background: #252525;
color: #fff;
}
Could someone please help me work this one out, been at it from last night and still can't figure it out? I have 2 styles, button and tips. I have 5 buttons total and the first 4 are fine as is opening a linked page. I need help to make the last one which uses the tips style to open a mouse-over message to also be displayed with the same button style. Thanks a bunch, the forum won't let me post the text so here is a link to it. lastborns.tripod.com heya! sorry if this is a real stupid quiestion/in the wrong area, im a bit new to css and this forum! Im wondering if there is any way to have a border only apply for part of a box... ie only the first/last 50% or 250px of the top and bottom borders. Hope this makes sence. Any help appriciated, even if it is to say it cant be done. Hi, just writing to get peoples oppinions. i have created a template for standardising the way my collegues at work layout their style sheets. any feedback will be welcome; PHP Code: /* ==== General Rules ==== */ body { } h1 { } h2 { } h3 { } h4 { } h5 { } h6 { } p { } a:link, a:visited { } a:hover { } img { } th { } td { } dt { } li { } /* ==== Layout Rules ==== */ #topBar { } /* ==== Specific Rules ==== */ #topBar h1 { } #topBar h2 { } #topBar h3 { } #topBar h4 { } #topBar h5 { } #topBar h6 { } #topBar p { } #topBar a:link, #topBar a:visited { } #topBar a:hover { } #topBar img { } #topBar th { } #topBar td { } #topBar dt { } #topBar li { } #leftBar { } /* ==== Specific Rules ==== */ #leftBar h1 { } #leftBar h2 { } #leftBar h3 { } #leftBar h4 { } #leftBar h5 { } #leftBar h6 { } #leftBar p { } #leftBar a:link, #leftBar a:visited { } #leftBar a:hover { } #leftBar img { } #leftBar th { } #leftBar td { } #leftBar dt { } #leftBar li { } #rightBar { } /* ==== Specific Rules ==== */ #rightBar h1 { } #rightBar h2 { } #rightBar h3 { } #rightBar h4 { } #rightBar h5 { } #rightBar h6 { } #rightBar p { } #rightBar a:link, #rightBar a:visited { } #rightBar a:hover { } #rightBar img { } #rightBar th { } #rightBar td { } #rightBar dt { } #rightBar li { } #mainContent { } /* ==== Specific Rules ==== */ #mainContent h1 { } #mainContent h2 { } #mainContent h3 { } #mainContent h4 { } #mainContent h5 { } #mainContent h6 { } #mainContent p { } #mainContent a:link, #mainContent a:visited { } #mainContent a:hover { } #mainContent img { } #mainContent th { } #mainContent td { } #mainContent dt { } #mainContent li { } #bottomBar { } /* ==== Specific Rules ==== */ #bottomBar h1 { } #bottomBar h2 { } #bottomBar h3 { } #bottomBar h4 { } #bottomBar h5 { } #bottomBar h6 { } #bottomBar p { } #bottomBar a:link, #bottomBar a:visited { } #bottomBar a:hover { } #bottomBar img { } #bottomBar th { } #bottomBar td { } #bottomBar dt { } #bottomBar li { } #vNav { } /* ==== Specific Rules ==== */ #vNav h1 { } #vNav h2 { } #vNav h3 { } #vNav h4 { } #vNav h5 { } #vNav h6 { } #vNav p { } #vNav a:link, #vNav a:visited { } #vNav a:hover { } #vNav img { } #vNav th { } #vNav td { } #vNav dt { } #vNav li { } #hNav { } /* ==== Specific Rules ==== */ #hNav h1 { } #hNav h2 { } #hNav h3 { } #hNav h4 { } #hNav h5 { } #hNav h6 { } #hNav p { } #hNav a:link, #hNav a:visited { } #hNav a:hover { } #hNav img { } #hNav th { } #hNav td { } #hNav dt { } #hNav li { } /* ==== Custom Rules ==== */ .imgLeft { margin: 2px; float: left; } .imgRight { margin: 2px; float: right; } Hi all i am currently in the process of playing with "display: table-cell" and such instead of tables and i am wondering how you can get a table-row to span across the table cells below it instead of just the first one? quick question: not sure if this is possible. I want to know if it is possible to create one style with set properties. Then a second style, set it equal to the first one, instead of copying the properties to the second. theoretically: .style1 { prop:1; prop:2; prop:3; } .style2 = .style1 if it can't be done, then let me know, I know how to copy and paste. I was just curious it if was On the title of my gallery one of the words has moved to the second row. There is obvious room before the text hits the search box so I'm hoping to have all the text on the same row. This is what I've found for the gallery title CSS: #gallerytitle { padding: 10px 10px 10px 20px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; background: #F8F8F8; height:30px; border-bottom: 1px solid #CCC; What would I change there (if that is indeed the part that needs to be changed) to get the desired effect? Here is the site where you can see the gallery title issue. EDIT: I guess I can't link to my site. Hmm. It's kind of hard to describe what my problem is. I appreciate any help |
|||||||