Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
Register
| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old August 3rd, 2007, 03:26 PM
Friend of Wrox
 
Join Date: Jul 2006
Location: olathe, ks, USA.
Posts: 238
Thanks: 0
Thanked 2 Times in 2 Posts
Send a message via MSN to rsearing
Default Inconsistent Margin-Left Behavior

Ok--I am baffled. I have a page www.sunsart.net that isn't always consistent. I am trying to have a 10px margin to the left of the picture of Sun. Sometimes it's there..sometimes it's not. Try clicking on a different button and then going back to "about"---what is causing this. I need the 10 px gap there.

Here's my styling:

body {
    font-family: sans-serif;
    margin: 0;
    margin-top:5px;
    padding: 0;
    background: url(site_images/back.jpg) center;
    background-repeat: repeat-y;

}

h1, h6 {
    margin: 0;
    font-weight: normal;
}

div#main {

    width:800px;
    margin-left:auto;
    margin-right:auto;

}

div#header {
    border:2px solid black;
    margin-bottom:5px;
    font-size:0;
}

div#aboutbutton {
    border: 2px solid black;
    float:left;
    font-size:0;
    margin-bottom:-59px;
}

div#exhibitbutton {
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    float:left;
    font-size:0;
    margin-bottom:-59px;
}

div#awardsbutton {
    border: 2px solid black;
    float:left;
    font-size:0;
    margin-bottom:-59px;
}

div#artbutton {
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
    float:left;
    font-size:0;
    margin-bottom:-59px;
}

div#container {
        position:relative;
    margin-top:58px;
        border-left: 2px solid black;
        border-right: 2px solid black;
        border-bottom: 1px solid black;
        border-top: 1px solid black;
}

div#footer
{
    background:white;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    border-right: 2px solid black;
    border-top: 1px solid black;
    padding:10px;

}

div#test {
    font: arial;
}

div#addpicturesbutton
{
    border: 2px solid black;
    float:left;
    font-size:0;
    margin-bottom:-59px
}

div#addshowbutton
{
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    float:left;
    font-size:0;
    margin-bottom:-59px
}

div#addawardsbutton
{
    border: 2px solid black;
    float:left;
    clear:right;
    font-size:0;
    margin-bottom:-59px
}

div#sunpic
{
    position:relative;
    margin-top:10px;
    margin-right:10px;
    float:left;
    width:310;
    margin-left:110px;
    border:2px solid black;
    font-size:0;
    background:purple;
}

div#abouttext
{
    margin:10px;
    font-family: sans-serif;

}


div#showsright
{
    margin-left:435px;
    padding:10px;
    min-height:300px;
}

div#awardleft
{
    margin-top:10px;
    margin-left:10px;
    }

div#awardright
{
    position:absolute;
    top:0;
    bottom:0;
    width:400px;
    margin-left:430px;
    min-height:735px;
    padding-top:9px;
}


#login
{
    background:white;
    border-right:2px solid black;
}

.absolute
{
    position: absolute;
    top:50px;
    left:50px;
    background-color: #5795df;
    width: 320px;
    border:double 2px black;
    text-align:center;
}

.MyView
{
    border-color: Blue;
}



.MyView td
{
    border-color: Blue;
}

div#main2
{
    width:800px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}


THANKS!!!
Rob

Reply With Quote
  #2 (permalink)  
Old August 3rd, 2007, 04:34 PM
Friend of Wrox
Points: 1,749, Level: 16
Points: 1,749, Level: 16 Points: 1,749, Level: 16 Points: 1,749, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2007
Location: San Diego, CA, USA.
Posts: 477
Thanks: 10
Thanked 19 Times in 18 Posts
Default

I tried working on this, but I'm not very convinced about my results without having all the images in the layout. Try adding padding-left:10px; to #container, and see if that fixes the problem.

Two other quick notes.

You have FF problem when I look at it; the floated button images are piling up on top of each other, the yellow art gallery is the only one I'm seeing. Works fine in IE. I spent most of my time on this and still haven't come up with a good solution, but again, I don't have the full layout. Try setting their display:block, display:inline, and play with position. That would be a good place to start.

I'm assuming the viewstate is for the login information. I'm security cautious, but I prefer not to have a viewstate recording security information. If this were my page, I'd set the viewstate to false, but that's me.

-------------------------

Whatever you can do or dream you can, begin it. Boldness has genius, power and magic in it. Begin it now.
-Johann von Goethe

When Two Hearts Race... Both Win.
-Dove Chocolate Wrapper

Chroniclemaster1, Founder of www.EarthChronicle.com
A Growing History of our Planet, by our Planet, for our Planet.
Reply With Quote
  #3 (permalink)  
Old August 3rd, 2007, 05:12 PM
Friend of Wrox
 
Join Date: Jul 2006
Location: olathe, ks, USA.
Posts: 238
Thanks: 0
Thanked 2 Times in 2 Posts
Send a message via MSN to rsearing
Default

Not sure what viewstate is being used for---but it's nothing i did--I assume it deals with ASP.NET 2.0 and how it handles membership?

As to padding...tried that. I tried margin-right on container..padding...etc.

What's weird is it will work sometimes..and sometimes not.

I'm dumbfounded.

-Rob

Reply With Quote
  #4 (permalink)  
Old August 4th, 2007, 02:58 AM
Imar's Avatar
Wrox Author
Points: 72,055, Level: 100
Points: 72,055, Level: 100 Points: 72,055, Level: 100 Points: 72,055, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,086
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

Hi there,

ViewState is ASP.NET's mechanism to maintain state across postbacks. It usually doesn't contain sensitive data (unless you put it there) but it contains state information about the page when it first loaded.

Usually, ViewState is a good thing, although it adds considerably yo the size of the page. Reading the first few pages of results from this Google search:

http://www.google.com/search?hl=en&q=viewstate+minimize

should give you a good idea about what ViewState is, and how to minimize it.

Cheers,

Imar

---------------------------------------
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Everyone is unique, except for me.
Author of ASP.NET 2.0 Instant Results and Beginning Dreamweaver MX / MX 2004
Want to be my colleague? Then check out this post.
Reply With Quote
  #5 (permalink)  
Old August 4th, 2007, 09:44 AM
planoie's Avatar
Friend of Wrox
Points: 16,481, Level: 55
Points: 16,481, Level: 55 Points: 16,481, Level: 55 Points: 16,481, Level: 55
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Aug 2003
Location: Clifton Park, New York, USA.
Posts: 5,407
Thanks: 0
Thanked 16 Times in 16 Posts
Default

Quote:
quote:Originally posted by rsearing
 What's weird is it will work sometimes..and sometimes not.

Rob,

Unfortunately, this is the way it usually works with web stuff. With all the different browsers out there and their inconsistent adherence to the HTML standards, you get various results. Unless you know or have some control over the browser used to view the site you are going to have to stick to well adhered to standards or simpler layouts that will be flexible so they don't go terribly wrong across browsers.

In particular, I have found that the "float" css property doesn't work consistently enough to use reliably.

In your case I'd recommend using a simple table to lay out the image menu instead of the CSS. This will be far more consistent between browsers.

-Peter
Reply With Quote
  #6 (permalink)  
Old August 6th, 2007, 12:35 PM
Friend of Wrox
Points: 1,749, Level: 16
Points: 1,749, Level: 16 Points: 1,749, Level: 16 Points: 1,749, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2007
Location: San Diego, CA, USA.
Posts: 477
Thanks: 10
Thanked 19 Times in 18 Posts
Default

another option would be to layout the buttons with position:absolute, and define a top:XXXpx to clear the header and layout each button with a left:XXXpx that sets each one next to the previous button.

-------------------------

Whatever you can do or dream you can, begin it. Boldness has genius, power and magic in it. Begin it now.
-Johann von Goethe

When Two Hearts Race... Both Win.
-Dove Chocolate Wrapper

Chroniclemaster1, Founder of www.EarthChronicle.com
A Growing History of our Planet, by our Planet, for our Planet.
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Why are number of pages inconsistent? Audioicon BOOK: Beginning ASP.NET 3.5 : in C# and VB BOOK ISBN: 978-0-470-18759-3 3 October 16th, 2008 09:02 PM
LEFT vs LEFT OUTER joxa83 SQL Server 2005 3 September 18th, 2008 03:13 AM
inconsistent data stealthdevil Access VBA 2 November 10th, 2006 05:03 PM
inconsistent date formats from calendar control sheridan ASP.NET 1.0 and 1.1 Basics 2 March 24th, 2006 05:56 AM



All times are GMT -4. The time now is 09:09 AM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.