Css aside problem
i have a little problem in css and i dont know how to fix it...
html
<article class="content">
<h1>header text</h1>
<aside>
<p>texto</p>
<p>alala</p>
<p>lalala</p>
<p>alala</p>
<p>alala</p>
<p>lalal</p>
<p>lala</p>
<p>lala</p>
</aside>
<section>
<p>paragraph text</p>
<p>another p text</p>
</section>
</article>
yellow background is aside , inside container and next to section
aside {
float: left;
width: 180px;
background: #EADCAE;
height: auto;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
section {
margin-top:15px;
margin-bottom:15px;
width: auto;
display:block;
.container {
width:auto;
max-width:960px;
padding: 10px;
top: 0px;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
obviously i want the aside next to the section be inside the container.
i do not use width in pixels bacuse other pages do not have aside and its a liquid container
so.. i don´t know where im wrong
Based on what you are asking we do not have enough of the code to solve your problem. You are saying that the yellow "aside" should be within the grey section. But the grey section is either not in the "container" class or the container class is also defined somewhere else on your stylesheet with the background which we cannot see.
There is nothing wrong with the code you have posted. We are going to have to see more of what's around the "article" to solve this problem. I'd also recommend running your site through the validator at this point: http://validator.w3.org/
Similar Messages
-
Hi All, 10 years since I've been on here (in the days of tables) I have, I'm sure a very basic css float problem in the footer and hopefully someone could take the time to review it for me. I have checked everything but can't find the problem. Thanks in advance;
example of problem here http://davidbrown.ipower.com/template/template.htm
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Our Jewelry Retail Secrets - Thank You</title>
<link href="../stylesheet/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.H1_black {color: #000000}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 25px;
font-weight: normal;
color: #000000;
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
.headlinetxt_colour {color: #FF6600}
.style1 {color: #ff6600}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="wrapperfix">
<div id="toporange_bg">login</div>
</div>
<div id="wrapperfix_top_grey">
<div id="top_grey_content_wrapper">
<div id="big_logo"></div>
<div id="welcome_user">Welcome "username here"</div>
</div>
</div>
</div>
<div id="main_content">
<p>
<!--main body content goes here -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel felis velit. Proin a nisl diam, id hendrerit lectus. Nunc eget tortor arcu. Mauris fringilla felis eget mi facilisis vel auctor est lacinia. Sed sit amet dui nibh, in varius metus. Duis malesuada euismod tortor eget lacinia. Donec pretium rutrum nunc, sagittis condimentum elit aliquam in. In eu mauris dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> Nam vel felis velit. Proin a nisl diam, id hendrerit lectus. Nunc eget tortor arcu. Mauris fringilla felis eget mi facilisis vel auctor est lacinia. Sed sit amet dui nibh, in varius metus. Duis malesuada euismod tortor eget lacinia. Donec pretium rutrum nunc, sagittis condimentum elit aliquam in. In eu mauris dui. </p>
</div>
<div id="footer_container">
<div id="footer">
<div id="footer_left">Footer Left</div>
<div id="footer_centre">Footer Centre</div>
<div id="footer_right">Footer Right</div></div>
</div>
</body>
</html>
#footer_container {
background-color: #333333;
width: 100%;
top: 0px;
margin: 0px;
padding: 0px;
#footer {
background-color: #666666;
min-width: 1000px;
margin-right: auto;
margin-left: auto;
padding: 0px;
width: 1000px;
height: 150px;
overflow: hidden;
clear: both;
margin-top: 0px;
margin-bottom: 0px;
position: relative;
#footer_left {
float: left;
width: 33%;
margin: 0px;
padding: 0px;
height: 150px;
#footer_centre {
width: 33%;
height: 150px;
margin: 0px;
padding: 0px;
float: left;
#footer_right {
float: left;
width: 33%;
height: 150px;
margin: 0px;
padding: 0px;I still don't see the #footer_left rule in the CSS in the online example at
http://davidbrown.ipower.com/template/template.htm -
Is this Cf or CSS causing problem?
I am on the home stretch on this job. I have this one irritating problem and I am not sure if the prob is being caused by a <cfinput> tag or a style sheet
problem. Maybe someone out there can help identify what's happening. My guess is that it is in the CSS, but pulling my hair out to find it.
You will have to go to this page: http://www.renobowls.com/leagues/leagueRegSelect.cfm and click on "Individual Reg" button.
Look at the radio buttons underneath "Step One: Individual Registration"
I cannot get these suckers to line up in a single line. Here is the code:
<div class="box2">
<table>
<tr>
<td width="100%">
Are you a returning Reno Bowls league player?
</td>
<td width="50%">
<strong>NO</strong> <cfinput type="radio" class="fleft" name="priorRBLeague" value="No" checked="no">
</td>
<td>
<strong>YES</strong><cfinput class="fleft" type="radio" name="priorRBLeague" value="Yes" checked="Yes">
</td>
</tr>
</table>
</div>
Here is the CSS:
/*box2*/
.box2{ background:#e8e8e7; width:100%;}
.box2 .indent-box-1{ padding:35px 0 0 0; }
Inherited CSS: (going backwards)
div.container { overflow:hidden; width: 100%}
then:
/*box*/
.box{ background:#fdfdfd; width:100%;}
.box .border-top {background:url(images/border_top.gif) repeat-x top;}
.box .border-bottom {background:url(images/border_bottom.gif) repeat-x bottom;}
.box .border-left {background:url(images/border_left.gif) repeat-y left;}
.box .border-right {background:url(images/border_right.gif) repeat-y right;}
.box .corner-top-left {background:url(images/corner_top_left.gif) no-repeat left top;}
.box .corner-top-right {background:url(images/corner_top_right.gif) no-repeat right top;}
.box .corner-bottom-left {background:url(images/corner_bottom_left.gif) no-repeat left bottom;}
.box .corner-bottom-right {background:url(images/corner_bottom_right.gif) no-repeat right bottom; width:100%; }
.box .indent-box{ padding:35px 35px 17px 35px; }
then:
/*T-Reg*/
#tReg { font-size:0.75em; width:100%; text-align:left;}
#tReg .indent-main{padding:0 67px 0 67px}
#tReg .title{ background:url(images/bg_title.gif) repeat-x top; text-align:center}
#tReg .title h2{ margin-bottom:5px}
#tReg .img-left{ float:left; margin:0 20px 16px 0}
#tReg .img-left1{ float:left; margin:0 20px 0 0}
#tReg .img-indent{ margin:0 0 16px 0}
#tReg .img-indent1{ margin:0 12px 6px 0}
#tReg p{ margin:0 0 17px 0}
#tReg .p{ margin:0}
#tReg .p1{ margin:0 0 17px 0; width:100%}
#tReg .p2{ margin:0 0 7px 0}
#tReg h4{color:#6d6d6d; font-size:1em; }
#tReg h5{color:#2a88d8; font-size:.916em; text-transform:uppercase; margin-bottom:5px }
#tReg h2{color:#3b3e40; font-size:1.66em; text-transform:uppercase; margin-bottom:15px; line-height:1.2em }
#tReg .h2{color:#0f2f55; font-size:1.66em; text-transform:uppercase; margin-bottom:5px }
#tReg .h2 span{color:#1e5597; text-transform:none; font-weight:normal}
#tReg .tail{ background:url(images/tail.gif) repeat-x bottom; padding-bottom:17px; margin-bottom:17px}
#tReg ul{margin:0; padding:0; list-style:none;}
#tReg ul li{background:url(images/marker.gif) center left no-repeat; background-position:1 1px; margin:0; padding-left:18px; }
#tReg ul li a{color:#6d6d6d; text-decoration:none ; line-height:2em; font-weight:bold}
#tReg ul li a:hover { text-decoration:underline; }
#tReg .indent{padding:28px 0 0 0}
#tReg .indent-1{padding:0 0 0 128px}
.txt1{ color:#6d6d6d; font-weight:bold}
.txt2{ color:#b72723; font-weight:bold}
finally:
body {font-size:100%; line-height:1em; background:url(images/bg.gif) repeat-x #03162a; position:relative;}try this:
<div class="box2">
<table>
<tr>
<td width="100%">
<table style="width:100%">
<tr>
<td><nobr>Are you a returning Reno Bowls league player?</nobr></td>
<td><strong>NO</strong></td>
<td><cfinput type="radio" class="fleft" name="priorRBLeague" value="No" checked="no"></td>
<td><strong>YES</strong><cfinput class="fleft" type="radio" name="priorRBLeague" value="Yes" checked="Yes"></td>
</tr>
</table>
</td>
</tr>
</table>
</div> -
I should start this by saying I am very new to CSS layouts,
and am self taught, so I'm probably doing something very wrong. So
far I've stuck to really simple layouts and had no problems...but
they were very simple layouts.
With the site I'm doing at the moment I have placed other
div's inside a content div, so that I can have left and right hand
content within the content div. But the left and right div's are
not pushing the content div down with their content, and I'm not
sure what else to try to get it to work.
I've tried setting the height of the content div to auto or
inherit but that doesn't work.
As you can see on the main page of the site I'm using a
background image in the content cell.
http://members.westnet.com.au/zelky/surfschoolnew/index.html
And if you look at the details page you can see what I am
trying to describe. The content div not pushing down with the left
and right content div’s contents means the background image
is just a few pixels deep under the nav div.
http://members.westnet.com.au/zelky/surfschoolnew/details.html
And my pathetic CSS/stylesheet is here:
http://members.westnet.com.au/zelky/surfschoolnew/mainstyle.css
Thanks in advance and hopefully my mess isn’t’ to
hard to look at. As I said I'm a bit lost so hopefully I'm not
going to confuse anyone with my "home made" skills.When you 'float' elements on your page you effectively remove
them from
the normal flow of the document, therfore the 'content'
<div> thinks
nothing is inside it. You need to help it by 'clearing' the
floats.
There are various methods for clearing floats.
Insert a 'clearing' <br> (shown below) into your pages
code directly
AFTER the closing 'right' container tag and BEFORE the
closing 'content'
container tag.
</div><!-- end 'right' -->
<br style="clear: both;" />
</div><!-- end 'content' -->
zelky wrote:
> I should start this by saying I am very new to CSS
layouts, and am self taught,
> so I'm probably doing something very wrong. So far I've
stuck to really simple
> layouts and had no problems...but they were very simple
layouts.
>
> With the site I'm doing at the moment I have placed
other div's inside a
> content div, so that I can have left and right hand
content within the content
> div. But the left and right div's are not pushing the
content div down with
> their content, and I'm not sure what else to try to get
it to work.
>
> I've tried setting the height of the content div to auto
or inherit but that
> doesn't work.
>
> As you can see on the main page of the site I'm using a
background image in
> the content cell.
>
>
http://members.westnet.com.au/zelky/surfschoolnew/index.html
>
> And if you look at the details page you can see what I
am trying to describe.
> The content div not pushing down with the left and right
content div?s contents
> means the background image is just a few pixels deep
under the nav div.
>
>
http://members.westnet.com.au/zelky/surfschoolnew/details.html
>
> And my pathetic CSS/stylesheet is here:
>
>
http://members.westnet.com.au/zelky/surfschoolnew/mainstyle.css
>
> Thanks in advance and hopefully my mess isn?t? to hard
to look at. As I said
> I'm a bit lost so hopefully I'm not going to confuse
anyone with my "home made"
> skills.
>
> -
CSS layout problems in Explorer (fine in Firefox and Safari)
Firstly apologies to the mods, I had mistakenly posted this
in the dynamic section also...
My problem - I am working on a CSS site (my first!) here
http://www.benfrain.com
It appears fine in Firefox (PC and Mac) and Safari (mac) but
when I view it in Explorer for Mac (5.2.3) I get a over long page
and I get no auto margin on the left.
Another small curiosity - I have noticed that my background
image on my div id "header" seems to start off again on the right.
Again, Explorer 5.2 for mac only...
My html and css both validate.
Anybody know why this is happening?quote:
Originally posted by:
bregent
>It appears fine in Firefox (PC and Mac)
Have you tried increasing the text size?
Do you mean in the browser? I just tried it in Firefox and
after two increases the layout/style of the page kind of 'falls
apart' - how would this be rectified? -
DW CS3 CSS template problems in EI6
I'm new to CSS and DW, so I tried starting with DW's new CSS
layouts. After working on this off and on for about a year, I
finally got the design to look okay in both FF 2 and IE 7. Wouldn't
you know my client has IE 6 and the layout breaks in 6. In 6 the
middle section, including the banner image, float drop down to the
bottom. If I make the width on #container2 to be 956 pixels instead
of 950, then 6 lets the middle section float up, but all browsers
have a background colored gap between the banner images and one or
more of the sidebar images. I'm ready to pull my hair out!
Here's the link to the page set to work for IE 7 and FF and
to break in 6. The entire site, of course, has many more pages but
this just has the index because I'm experimenting.
http://www.montanahorsesales.com/shf2/
and here's the style sheet that has the problem.
http://www.montanahorsesales.com/shf2/styles/thrColFix.css
The reason I added the #container2 is to get the cream
colored background to show in both IE7 and FF. One or the other was
giving me the dark green background in the main content and the
other was giving me the cream colored main content background like
it was supposed to.
Any suggestions? Is there a quick and easy way to fix this so
it works in all browsers? Or a hack to fix it for IE 6? I can live
without it working in any IE before 6, but I need 6 to work.
In general, it is a mistake to start with DW's included CSS
layouts? I thought it would be such a smart thing to do but now I'm
not so sure!Cleo3 wrote:
> Any suggestions? Is there a quick and easy way to fix
this so it works in all
> browsers? Or a hack to fix it for IE 6? I can live
without it working in any
> IE before 6, but I need 6 to work.
Hi,
you could try replacing yours for mine...
.leftMargin198 {
margin: 0px;
padding: 0px;
height: 175px;
width: 554px;
float: left;
HTH
chin chin
Sinclair -
I'm just becoming comfortable with using CSS. At least, I
thought I was. I put together a test page and it worked on IE 7.
Then, I downloaded Firefox and Safari to check compatability on
other browsers.
I have a centered page with a top navigation bar, content
area, and a footer (bottomNavBar). Inside the content area I have
two sections, a left section and a right section. In the left there
should be text, some sort of welcome text. In the right some sort
of Flash intro video the user can play when they choose.
The problem: I got the float to work in IE 7 (Sometimes it
wouldn't. It seems tempermental.). However, the floats won't work
on the other 2 browsers. In the other 2 it puts the first div
listed above the second instead of side by side like in IE 7.
Here is the code:To make your contentIndexFlashIntro & contentIndexWelcome
divs sit
side-by-side you have to assign each a width. The combined
total of those
widths must be <=800px.
Walt
"JasonTheAdobeFan" <[email protected]> wrote
in message
news:[email protected]...
> I'm just becoming comfortable with using CSS. At least,
I thought I was. I
> put
> together a test page and it worked on IE 7. Then, I
downloaded Firefox and
> Safari to check compatability on other browsers.
>
> I have a centered page with a top navigation bar,
content area, and a
> footer
> (bottomNavBar). Inside the content area I have two
sections, a left
> section and
> a right section. In the left there should be text, some
sort of welcome
> text.
> In the right some sort of Flash intro video the user can
play when they
> choose.
>
> The problem: I got the float to work in IE 7 (Sometimes
it wouldn't. It
> seems
> tempermental.). However, the floats won't work on the
other 2 browsers. In
> the
> other 2 it puts the first div listed above the second
instead of side by
> side
> like in IE 7.
>
> Here is the code:
>
>
> ***First is the HTML***
>
> <body>
> <div class="header">
> <img src="Logo001.png" />
> </div>
> <div class="container">
> <div class="topNavBar">
> <ul class="topNavBarUL">
> <li class="topNavBarLI"><a
class="topNavBarLinksCurrent"
> href="index.htm">Home</a></li>
> <li class="topNavBarLI"><a
class="topNavBarLinks"
> href="page2.htm">Link2</a></li>
> <li class="topNavBarLI"><a
class="topNavBarLinks"
> href="page3.htm">Link3</a></li>
> <li class="topNavBarLI"><a
class="topNavBarLinks"
> href="page4.htm">Link4</a></li>
> </ul>
> </div>
> <div class="content">
> <div class="contentIndexFlashIntro">
> <script type="text/javascript">
> AC_FL_RunContent(
> 'codebase','
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#
>
version=9,0,28,0','width','350','height','350','title','IntroVideo','src','Intro
> Video002','quality','high','pluginspage','
http://www.adobe.com/shockwave/downloa
>
d/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','IntroVideo002'
> //end
> AC code
> </script><noscript><object
> classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
> codebase="
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve
> rsion=9,0,28,0" width="350" height="350"
title="IntroVideo">
> <param name="movie" value="IntroVideo002.swf" />
> <param name="quality" value="high" />
> <embed src="IntroVideo002.swf" quality="high"
> pluginspage="
http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Versio
> n=ShockwaveFlash" type="application/x-shockwave-flash"
width="350"
> height="350"></embed>
> </object></noscript>
> </div>
> <div class="contentIndexWelcome">
>
<!--<center><h2>Welcome</h2></center>
> <hr/>-->
> <p class="smallText">Paragraph 1</p>
> <p class="smallText">Paragraph 2</p>
> <hr/>
> <ul><u class="smallText">Unordered
List</u>
> <li><span class="smallText">Item
1</span></li>
> <li><span class="smallText">Item
2</span></li>
> <li><span class="smallText">Item
3</span></li>
> <li><span class="smallText">Item
4</span></li>
> <li><span class="smallText">Item
5</span></li>
> <li><span class="smallText">Item
6</span></li>
> </ul>
> <hr/>
> <p class="smallText">Concluding
Paragraph</p><br />
> </div>
> </div>
> <div class="bottomNavBar">
> <p>© Copyright 2008</p>
> </div>
> </div>
> </body>
>
> *********************************
> ***Next is the external CSS.***
>
> body {
> font-family: Arial, Helvetica, sans-serif;
> background-color: #999999;
> margin: 0px;
> }
>
> .header {
> background-color: #FFFFFF;
> width: 100%;
> margin: 0px;
> padding: 0px 0px 0px 0px;
> top: 0px;
> }
>
> .container {
> background-color: #FFFFFF;
> width: 800px;
> margin-left: auto;
> margin-right: auto;
> margin-bottom: 0px;
> margin-top: 0px;
> }
>
> /* top navigation bar class
> ** I prefer to have a nav bar to the top rather than the
left
> */
> .topNavBar {
> width: 800px;
> height: 22px;
> background-color: #0080EE;
> border: 0px solid #FFFFFF; /* I turned off the pixel
width because I
> didn't
> ** want a border right now. But I left the rest in case
> ** I wanted to change it back to 1px.
> */
> }
>
> /* topNavBar link properties
> ** The idea is to have each link highlight when cursor
comes over any part
> ** of the section, not just the words. Then goes back to
normal when
> cursor
> ** leaves. The current page should have its own link
highlighted always.
> */
> ul.topNavBarUL {
> height: 17px;
> float: left;
> width: 100%;
> padding: 0;
> margin: 0;
> list-style-type: none;
> }
>
> li.topNavBarLI {
> display: inline;
> }
>
> a.topNavBarLinks:link, a.topNavBarLinks:active,
a.topNavBarLinks:visited {
> float: left;
> text-decoration: none;
> color: #FFFFFF;
> background-color: #0080EE;
> padding: 0.15em 0.6em;
> border-right: 1px solid #FFFFFF;
> }
>
> a.topNavBarLinks:hover {
> color: #FFFFFF;
> background-color: #FF9900;
> text-decoration: none;
> }
>
> a.topNavBarLinksCurrent, a.topNavBarLinksCurrent:active,
> a.topNavBarLinksCurrent:visited,
a.topNavBarLinksCurrent:hover {
> float: left;
> text-decoration: none;
> color: #FFFFFF;
> background-color: #00FF33;
> padding: 0.15em 0.6em;
> border-right: 1px solid #FFFFFF;
> }
>
> /* content class
> ** This is the part of the page that the content will go
in.
> ** It should have the full width of the container class
and
> ** stretch in height based on the content with a minimum
> ** height of 500px.
> */
> .content {
> width: 800px;
> min-height: 400px;
> background-color: #FFFFFF;
> font-family: Arial, Helvetica, sans-serif;
> color: #000000;
> }
>
> /* content links
> ** The links in the content area will just be the
regular links.
> ** Navigation links will all be given special classes to
define them.
> */
> a:link, a:active, a:visited {
> color: #0080EE;
> text-decoration: none;
> }
>
> a:hover {
> color: #FF9900;
> text-decoration: underline;
> }
>
> /* content headings, hr
> */
> h1, h2, h3, h4, h5, h6 {
> font-family: Arial, Helvetica, sans-serif;
> color: #00FF33;
> margin-bottom: 2px;
> }
>
> hr {
> color: #0080EE;
> }
>
> p {
> text-indent: 20px;
> margin-top: 4px;
> }
>
> ul {
> margin-top: 4px;
> }
>
> li {
> list-style: square;
> color: #00FF33;
> }
>
> .contentIndexFlashIntro {
> padding-top: 2px;
> padding-right: 2px;
> float: right;
> }
>
> .contentIndexWelcome {
> float: left;
> text-align: justify;
> padding-top: 4px;
> padding-right: 10px;
> padding-bottom: 4px;
> padding-left: 4px;
> }
> -
I'm trying to use a default css file in a library project... I'm using this in my library's compile arguments:
"-include-stylesheet defaults.css /assets/styles/defaults.css"
In defaults.css, I'm trying to assign a defautl skin like this:
comp|Badge {
skin-class: ClassReference('com.woo.skins.BadgeSkin');
The problem is when the component is being newed:
Main Thread (Suspended: TypeError: Error #1009: Cannot access a property or method of a null object reference.)
mx.core::UIComponent/getStyle
spark.components.supportClasses::SkinnableComponent/attachSkin
spark.components.supportClasses::SkinnableComponent/validateSkinChange
spark.components.supportClasses::SkinnableComponent/createChildren
What part am I doing wrong? I'm hoping it's the -include-stylesheet part, I couldn't find a single example for using that.I assume you are using FlexBuilder to build and compile and not ant or the comand line correct? If so there are two things you need to check.
1) Where is your defaults.css located? As long as it is in the root of your library's src directory (ie. src/defaults.css) you shouldn't even need to add that compiler option. When it builds a project, FlexBuilder looks for a file named defaults.css in this location and will use it to override the framework version.
2) Go into your project properties -> build path -> assets tab. Make sure your defaults.css file is selected for inclusion. -
I have an unusual problem that must be something to do with
my Dreamweaver set-up.
All of a sudden all of my sites do not display the CSS in the
dreamweaver application. The CSS details all appear and I can
select them in the usual way but nothing appears on screen.
When I preview any page from any site in a browser it is
fine.
Does anyone have any idea what the problem might be?
Thanks
DaveVIEW | Style Rendering > Display Styles
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"davecheet" <[email protected]> wrote in
message
news:f65vv5$flb$[email protected]..
>I have an unusual problem that must be something to do
with my Dreamweaver
> set-up.
> All of a sudden all of my sites do not display the CSS
in the dreamweaver
> application. The CSS details all appear and I can select
them in the usual
> way
> but nothing appears on screen.
> When I preview any page from any site in a browser it is
fine.
>
> Does anyone have any idea what the problem might be?
>
> Thanks
>
> Dave
> -
CSS transitions problems..
I'm using this Page Visibility code in my project, it was perfect in the last version but the latest version not quite..
First off, when I tabbed out of the project on a web browser and when you tab back into it..
(On the previous version) It completely stops the animation and i'll be able to trigger the code.
(On the latest version) It skips few frames then play again.
So, my solution was to stop the timeline of the symbol which is playing whenever it goes to another tab but another problem occurs; once you tab out again on the time when the CSS transition is happening; the transition will stop the animating object and it will not resume the transition.
Oh btw, I'm using animate.css as my presets to my animations. I was adding and removing class and still nothing. I'll try to upload a sample but hopefully some of you will give some thoughts about this. Thank you!Hi Paolo
Sharing a sample will quickly help us get to the root cause.
Thanks for your time.
Regards
Avinash -
Hi everyone, I hope someone can help me out with this
problem.
My website displays fine in all the browser that I've tested,
but I've restenly noticed that areas are rendered wrong in the
Google Cache snapshot?
Example:
My Site:
www.dcypher.co.uk
Click
to view Google Cache Snapshot
This is the CSS code I have for the 2 column's in the body
that are displaying incorrectly:
#main {
background-image: url(images/mainBackground.gif);
background-repeat:repeat-y;
background-color: #666666;
width: 700px;
height: 100%;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
overflow: auto;
#mainText {
width: 434px;
margin: 0px;
padding-top: 40px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
float:left;
#mainNav {
width: 156px;
margin: 0px;
padding-top: 40px;
padding-right: 25px;
padding-bottom: 40px;
padding-left: 25px;
float:left;
I hope someone can shed some light on this for me as i'm
completely stumped.
Thanks in advance.
WebboYes...the pages from the book display perfectly in dw8, but
not in DWcs3.
I found that by commenting out the "clear:left;" under "#nav"
the page displays properly in DWcs3, too. That leaves open the
question of "why".
Thanks. -
Hi
I am building a site for a client that has had the page
designed by a graphic designer and she is being EXCEPTIONALLY picky
about the font size, spacing and many other things. The problem I
have is, that on some browsers, the space between the text and the
border at the top of the container, is double what it is in IE6 and
IE7. Can anyone tell me how I can fix this so that it has the same
amount of spacing in all browsers.
Many thanks
Julie
CSS code:
/* CSS Document */
/*formatting divs*/
body a p td th div blockquote ul ol dl{
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color:#999999;
margin: 0;
body { margin: 0px; padding: 0px; background:#262425}
h1 {font-family: Arial, Helvetica, sans-serif;
font-size:36px}
a:link {
text-decoration:underline;
color: #000000;
a:visited {color:#666666; text-decoration:underline;}
a:hover {color:#ff9c04; text-decoration:underline;}
/*layout divs*/
#wrapper {width: 820px; position:relative; margin:0 auto;
top:15%}
#header {clear:both; height:50px; width:820px}
#leftcol {
width: 108px;
float:left;
padding-right:12px;
text-align: right;
#container {margin:0; padding:0; float:right; width:695px}
#content {background-color:#FFFFFF; width: 328px; padding: 0
10px 0 10px; height: 500px; float:left; color: #666666; font-size:
14px; overflow: hidden;}
#rightcol {width: 347px; float:right}
#footer {clear: both}
#text {padding: 0 10px 10px 0; height: 370px; overflow:auto}
/*menu*/
#leftcol ul {}
#leftcol li {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
list-style:none;
.logo {
margin-right: 0px;
margin-left: 0px;
padding: 23px 0px 12px 0;}
/*design elements*/
.scroll {
scrollbar-face-color: #ffffff;
scrollbar-shadow-color: #C2A2DA;
scrollbar-highlight-color: #C2A2DA ;
scrollbar-3dlight-color: #ffffff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-track-color:#FFFFFF;
scrollbar-arrow-color:#C2A2DA}Designing for the web is NOT the same as designing for print.
Graphic
designers do not understand that there are too many variables
you can't
control such as screen size, browsers, and the default text
size used by
visitors. Firefox, Opera & Safari will render pages
differently than IE. In
some cases, you can use IE hacks or CSS tricks to get it
closer to what you
want. Or you could make one big graphic or image map but I do
not recommend
this as it will impact your site's search engine rankings
& user
accessibility.
--Nancy O.
Alt-Web Design & Publishing
www.alt-web.com
"ukjooles" <[email protected]> wrote in
message
news:[email protected]...
> Hi
>
> I am building a site for a client that has had the page
designed by a
graphic
> designer and she is being EXCEPTIONALLY picky about the
font size, spacing
and
> many other things. The problem I have is, that on some
browsers, the
space
> between the text and the border at the top of the
container, is double
what it
> is in IE6 and IE7. Can anyone tell me how I can fix this
so that it has
the
> same amount of spacing in all browsers.
>
> Many thanks
> Julie
>
> CSS code:
>
> /* CSS Document */
>
>
> /*formatting divs*/
>
> body a p td th div blockquote ul ol dl{
> font-family: "Times New Roman", Times, serif;
> font-size: 14px;
> color:#999999;
> margin: 0;
> }
>
> body { margin: 0px; padding: 0px; background:#262425}
>
> h1 {font-family: Arial, Helvetica, sans-serif;
font-size:36px}
>
> a:link {
> text-decoration:underline;
> color: #000000;
> }
> a:visited {color:#666666; text-decoration:underline;}
>
> a:hover {color:#ff9c04; text-decoration:underline;}
>
>
> /*layout divs*/
>
> #wrapper {width: 820px; position:relative; margin:0
auto; top:15%}
>
> #header {clear:both; height:50px; width:820px}
>
> #leftcol {
> width: 108px;
> float:left;
> padding-right:12px;
> text-align: right;
> }
>
> #container {margin:0; padding:0; float:right;
width:695px}
>
> #content {background-color:#FFFFFF; width: 328px;
padding: 0 10px 0 10px;
> height: 500px; float:left; color: #666666; font-size:
14px; overflow:
hidden;}
>
> #rightcol {width: 347px; float:right}
>
> #footer {clear: both}
>
> #text {padding: 0 10px 10px 0; height: 370px;
overflow:auto}
>
>
> /*menu*/
>
> #leftcol ul {}
> #leftcol li {
> font-family:Verdana, Arial, Helvetica, sans-serif;
> font-size: 11px;
> color: #FFFFFF;
> list-style:none;
> }
>
> .logo {
> margin-right: 0px;
> margin-left: 0px;
> padding: 23px 0px 12px 0;}
>
>
> /*design elements*/
>
> .scroll {
> scrollbar-face-color: #ffffff;
> scrollbar-shadow-color: #C2A2DA;
> scrollbar-highlight-color: #C2A2DA ;
> scrollbar-3dlight-color: #ffffff;
> scrollbar-darkshadow-color:#ffffff;
> scrollbar-track-color:#FFFFFF;
> scrollbar-arrow-color:#C2A2DA}
>
> -
I am working on re-doing pages on a site so the content is centered and fixed width using css. Previously used tables. I am having some problems with the display. The background for the left menu does not show except behind the menu. The container that holds the menu doesn't seem to go all the way to the bottom and thus is shifting the other containers at the bottom to the left. The main container does not seem to extend to the bottom either you can see where the background color stops. I have set the html/body to min 100%. Also in IE for windows, there is no margin between the slideshow and the left menu, Firefox there is a margin. You can view the page at http://www.cheyennecampingcenter.com/templatetest2.html .
I hope this makes some sense? I was up all night and I am on my way out now, just don't have much time to explain further right now. I am learning CSS, but obviously I have more to learn. Any help would be much appreciated!
Thanks,
SteveOkay, I'm still having trouble with the two background images, the bar on the left and the bar at top. In have remade the template and it displays fine when I create a page as shown here http://www.cheyennecampingcenter.com/template_test_FINAL1.html . When I reapply the template, the quote marks in the css definition of the "container" and "top_bar" are gone as well as the backgrounds as shown here http://www.cheyennecampingcenter.com/template_test_FINAL.html . The quote marks are still there in the template, but are lost when I reapply the template? Here is a sample of the css:
#top_bar { background-image: url('images new/header_bkgnd.jpg'); margin-right: auto; margin-left: 110px; width: 815px; height: 100px; }
#top_bar { background-image: url(images new/header_bkgnd.jpg); margin-right: auto; margin-left: 110px; width: 815px; height: 100px; }
I have tried a few things, but it only seems to happen in the "headlocked" part of the code. One other strange thing, if I take the html file that does not have the backgrounds and duplicate it in the site window, the quote marks and backgrounds come back. If I reapply the template to the duplicated file, they disappear again? Any Ideas?
Thanks again! -
I am new in designing using css for layout, and I'm having a
problem getting the page content to push the footer down.
Here's the page:
http://wmsgroup.com/client_temp/osps/vsc.html
I have attached the style sheet.
Thanks!OlDirty wrote:
> I am new in designing using css for layout, and I'm
having a problem getting
> the page content to push the footer down.
> Here's the page:
http://wmsgroup.com/client_temp/osps/vsc.html
> I have attached the style sheet.
>
> Thanks!
I had a quick look - remove the height from your #content_
rule.
HTH
chin chin
Sinclair -
Javafx css loadcontent problem
Hi ,
we are trying to dynamically load html content using webengine javafx.Content reference jquery mobile libraries and css.
If we write content on a file and then use webEngine.load(file://) renders ok, but if we use loadcontent and to load it from memory it seems that it bypass the jquery mobile css and or js files.
Any ideas will be appreciated.
ThanksSince ProGuard is supposed to be transparent, and it works without it, I'd say the problem source is clear.
Maybe you are looking for
-
Error while opening Crystal report 2008
Hi All, I get the following error when I try to open crystal report 2008 trial version: "Entry Point Not Found The procedure entry point ?CanStackDump@SLogger@CXLib400@@SA_NXZ could not be located in the dynamic link library cxlibw-4-0.dll." To over
-
Why do b/w photos show as color on my pc photostream?
When using new filters on iPhone ios7, the black and white photos do not show up except in color on my pc. I have switched to the apple viewer and they still show color. Is there a way I can rectify this?
-
Well I'm done typing, how do I get out of it?
Click another tool, wonderful, how about shortcuts? When I finish typing something, I'd much rather just press two buttons than drag the mouse over to a tool I don't need just to end the type. Is that really the only way out?
-
Forms Personalization Issues / Urgent help
Hello Oracle Gurus, I have an issue while customizing the Customer Standard Form in Oracle Applications using Forms Personalization. Issue descritption: 1) In Customer Standard Form (ARXCUDCI), at Bill-to Site level i need to disable the buttons NEW
-
Availability status and avatars
hey guys Web Beta is working pretty well for basic messaging needs - nice job. However, I don't know if it's just me on Chrome/PC - but no avatars display for contacts and more importantly, no sort of Availability icon/status indictator? It is very