Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Div CSS Cancelling out

    I'm a duck out of water when it comes to CSS and I profess no background in it, and openly admit generally I'm wading in the deep.

    I'm a bit confused why the below code isn't working, whether its my lack of understanding or if what I'm trying to do is impossible I don't know..

    Basic code... there's more 'meat' the the css class' but you'll get the gist..

    Code:
    CSS:
    
    div.xdiv
    {
    margin-left: 450px;
    }
    div.zdiv
    {
    margin-left: 460px;
    font-family:"Times New Roman", Times, serif;
    }
    HTML section:

    Code:
    <div class="xdiv"><img src="angry.gif" alt="Angry face" /></div>
    <div class="zdiv">Some text goes here</div>
    What ever I have tried the second div class never ever works.

    I've tried inspecting it via chrome but chrome doesn't see the linked CSS.

    I'm at a loss!

    Any education would be appreciated.

  • #2
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    what are you trying to accomplish and what is happening?

    according to the code you gave, the xdiv will start off 450px from the left and the zdiv will be under that, 460px from the left. Is that not what is happening?

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thats exactly what I expect to happen. Problem is zdiv doesn't style the text, or move the text in by 460px.

    Basically it looks (via chrome) that it doesn't use zdiv

  • #4
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    What does it do? When I create this html file, it looks like it should. Since you didn't show all the code, my guess is that there is some other code that is overriding this piece. I say that because the default font family on a website is times new roman. since you are assigning it here, did you change the default elsewhere in your css? Can you post all of your code so we can troubleshoot why it doesn't work as you think?

  • #5
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    It is better to share link of your page or share as attachment here of your full code... than only we can help you out in better way...

    Check if you have defined class zdiv twice in your CSS with different CSS properties

  • #6
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I can't post a link as its an internal page but I can post the code...

    HTML Code: I won't post all of it as it has ASP (classic) within it but I will post just past the point.

    zdiv in my CSS (as you'll see in my code) has only been defined once. My CSS is poor I know...

    Code:
    <%@ Language="VBScript" %>
    <% Option Explicit %>
    
    <!-- THIS IS FOR DATA INCIDENTS ONLY-->
    
    <html>
    <head>
    
    <title>New MI Incident</title>
    
    <script language="javascript" type="text/javascript" src="datetimepicker_css.js">
    
    </script>
    
    <script>
    
    function limitText(limitField, limitNum) {
        if (limitField.value.length > limitNum) {
            limitField.value = limitField.value.substring(0, limitNum);
        } 
    }
    
    function autotab(original,destination){
    if (original.getAttribute&&original.value.length==original.getAttribute("maxlength"))
    destination.focus()
    }
    
    </script>
    
    <link rel="stylesheet" type="text/css" href="incident.css" media ="screen">
    <link media="screen" href="./homepage.css" type="text/css" rel="stylesheet"/>
    
    </head>
    <body>
    <form><input type="button" value="Back" class="button" onclick="history.go(-1);return false;" /></form> 
    
    <div class='divx'>
    <img src="images/logo_insurance1_bg.gif" border="0" alt="RBS Insurance Logo"/></div>
    <br>
    <div class="divz">
    MI Risk Management - New DATA Incident
    </div>
    
    
    <%
    
    'Option Explicit 
    Dim strConnection, conn, rs, strSQL 
    Dim xdate, zdate, IncLevel
    
    xdate = (now())
    zdate = (date())
    
    IncLevel = 1
    
    Session.LCID = 2057 'Hex value for the UK
    
    blah..blah..blah..ASP onwards...
    CSS code... the xdiv/zdiv are at the bottom..

    Code:
    .first { 
    overflow:hidden;
    width: 500px;
    height: 82px;
    margin-left: 350px; 
    border-top: 1px solid;
    border-right: 1px solid;
    border-left: 1px solid;
    border-bottom: 1px transparent;
    _border-right-color: black;
    _border-left-color: black;
    _border-top-color: black;
    _border-bottom-color: pink;
    _filter: chroma(color=pink);
    
    } 
    
    .second { 
    overflow:hidden;
    width: 500px;
    height: 82px;
    margin-left: 350px; 
    margin-bottom: -2px;
    margin-top: -2px;
    border-top: 1px transparent;
    border-right: 1px solid;
    border-left: 1px solid;
    border-bottom: 1px transparent;
    _border-right-color: black;
    _border-left-color: black;
    _border-top-color: pink;
    _border-bottom-color: pink;
    _filter: chroma(color=pink);
    
    } 
    
    .third { 
    overflow:hidden;
    width: 500px;
    height: 82px; 
    margin-left: 350px;
    border-top: 1px transparent;
    border-right: 1px solid;
    border-left: 1px solid;
    border-bottom: 1px solid;
    _border-right-color: black;
    _border-left-color: black;
    _border-bottom-color: black;
    _border-top-color: pink;
    _filter: chroma(color=pink);
    
    }
    
    .button 
    {
        width: 44px;
        height; 16px;
        border: 1px solid #9cf;
        background: #036;
        font-weight: bold;
        font-size: 11px;
        text-align: center;    
        color: white;
    }
    
    
    .Owner
    {
    	margin-left: 10px;
    	border-width: 1px;
    	border-color: black;
    	width: 175px;
    	font-family: Trebuchet MS;
    }
    
    .Date
    {
    	margin-left: 24px;
    	border-width: 1px;
    	border-color: black;
    	width: 175px;
    	font-family: Trebuchet MS;
    }
    
    .ref
    {
    	margin-left: 12px;
    	border-width: 1px;
    	border-color: black;
    	width:175px;
    	font-family: Trebuchet MS;
    }
    
    .Type
    {
    	margin-left: 23px;
    	width: 175px;
    	border-width: 1px;
    	border-color: black;
    	font-family: Trebuchet MS;
    }
    
    .IncType
    {
    	margin-left: 28px;
    	width: 175px;
    	border-width: 1px;
    	border-color: black;
    	font-family: Trebuchet MS;
    }
    
    .Brief
    {
    	margin-left: 28px;
    	width: 175px;
    	border-width: 1px;
    	border-color: black;
    	font-family: Trebuchet MS;
    }
    
    .UpdBrief
    {
    	margin-left: 26px;
    	border-width: 1px;
    	border-color: black;
    	font-family: Trebuchet MS;
    }
    
    .stage
    {
    	margin-left: 19px;
    	border-width: 1px;
    	width: 175px;
    	border-color: black;
    	font-family: Trebuchet MS;
    }
    
    .CurrETA
    {
    	margin-left: 17px;
    	border-width: 1px;
    	width: 175px;
    	border-color: black;
    	font-family: Trebuchet MS;
    }
    
    .NxtETA
    {
    	margin-left: 14px;
    	border-width: 1px;
    	width: 175px;
    	border-color: black;
    	font-family: Trebuchet MS;
    }
    
    
    B
    {
    	Margin-left: 285px;
    	font-family: Trebuchet MS;
    	font-size: 16px;
    	font-weight: normal;
    	color: black;
    }	
    
    A
    {
    	Margin-left: 155px;
    	font-family: Trebuchet MS;
    	font-size: 16px;
    	font-weight: normal;
    	color: black;
    }
    div.nxtupd
    {
    	Margin-left: 235px;
    	font-family: Trebuchet MS;
    	font-size: 16px;
    	font-weight: normal;
    	color: black;
    }	
    
    div.xdiv
    {
    	margin-left: 265px;
    	margin-top: 25px;
    	margin-bottom: 40px
    }
    
    div.zdiv
    (
    	margin-left: 290px;
    	font-family: Trebuchet MS;
    	font-size: 16px;
    	font-weight: normal;
    }
    Thanks.

  • #7
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    If this is your actual code, here's the problems I noticed:

    In the CSS, you are coding "xdiv" and "zdiv", but in the HTML, you have them named as "divx" and "divz".

    Also, for div.zdiv, your opening bracket is actually a parenthesis, it should be a curly bracket.

    See if fixing those fixes the issue.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •