The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> div border property not rendering top border for ie7 and ie6, works in ie8 and every other browser/version
gavsiu
post Aug 15 2010, 04:49 PM
Post #1





Group: Members
Posts: 4
Joined: 15-August 10
Member No.: 12,516
i hate cross browser compatibility.. anyway, here's what i have..

CODE
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
* {
    vertical-align: baseline;
    font-weight: inherit;
    font-family: inherit;
    font-style: inherit;
    font-size: 100%;
    border: 0 none;
    outline: 0;
    padding: 0;
    margin: 0;
}
body {
    margin: 0px;
    padding: 0px;
    background: #013368;
    font: 14px/24px TeXGyreAdventor, Futura, 'Century Gothic', AppleGothic, sans-serif;
    color: #FFF;
}
.container {
    width: 920px;
    margin: 0px auto;
    padding: 5px 0px 25px;
}
p, #feedback div {
    margin-bottom: 14px;
}
#feedback, #feedback input, #feedback textarea {
    font: 14px/24px TeXGyreAdventor, Futura, 'Century Gothic', AppleGothic, sans-serif;
}
#feedback div {
    border: 1px solid #2885BB;
    padding: 7px;
    background: #013368;
    position: relative;
}
#feedback div.error {
    border: 1px solid #933;
}
#feedback #send {
    color: #000;
    background: url(images/send-button.png);
    height: 36px;
    width: 119px;
    cursor: pointer;
    margin-right: 7px;
}
#feedback #send:active {
    background: url(images/send-button.png) 0px 36px;
}
#name input, #email input, #subject input, #message textarea {
    color: #FFF;
    background: #013368;
}
#name {
    width: 437px;
    float: left;
}
#name input {
    width: 350px;
}
#email {
    width: 437px;
    float: right;
}
#email input {
    width: 350px;
}
#subject {
    clear: both;
}
#subject input {
    width: 800px;
}
#message textarea {
    width: 100%;
    height: 150px;
    overflow: auto;
    resize: none;
}
#feedback span.error {
    font: 11px TeXGyreAdventor, Futura, 'Century Gothic', AppleGothic, sans-serif;
    color: #000;
    background: #F33;
    border: 1px solid #933;
    padding: 2px 7px;
    display: none;
    position: absolute;
    top: -9px;
}
#feedback span.show {
    display: inline;
}
#errorName {
    left: 123px;
}
#errorEmail {
    left: 129px;
}
#errorSubject {
    left: 356px;
}
#errorMessage {
    left: 353px;
}
</style>
</head>
<body>
<div id="contact" class="container">
    <form id="feedback" action="index.php#contact" method="post">
        <div id="name"<?php if($nameFilter) echo " class=\"error\"" ?>><span id="errorName" class="error<?php if($nameFilter) echo " show" ?>">Minimum of 3 characters is required.</span>
            <label for="name">Name: </label>
            <input name="name" type="text" maxlength="64" required="required" value="<?php if(isset($hasError)) print($_POST['name'] ? $_POST['name'] : "") ?>">
        </div>
        <div id="email"<?php if($emailFilter) echo " class=\"error\"" ?>><span id="errorEmail" class="error<?php if($emailFilter) echo " show" ?>">A valid e-mail address is required.</span>
            <label for="email">E-mail: </label>
            <input name="email" type="email" maxlength="254" required="required" value="<?php if(isset($hasError)) print($_POST['email'] ? $_POST['email'] : "") ?>">
        </div>
        <div id="subject"<?php if($subjectFilter) echo " class=\"error\"" ?>><span id="errorSubject" class="error<?php if($subjectFilter) echo " show" ?>">Minimum of 5 characters is required.</span>
            <label for="subject">Subject: </label>
            <input name="subject" type="text" maxlength="128" required="required" value="<?php if(isset($hasError)) print($_POST['subject'] ? $_POST['subject'] : "") ?>">
        </div>
        <div id="message"<?php if($messageFilter) echo " class=\"error\"" ?>><span id="errorMessage" class="error<?php if($messageFilter) echo " show" ?>">Minimum of 25 characters is required.</span>
            <label for="message">Message:</label>
            <br>
            <textarea name="message" maxlength="1024" required="required"><?php if(isset($hasError)) print($_POST['message'] ? $_POST['message'] : "") ?></textarea>
        </div>
        <input id="send" type="submit" name="send" value="Send Message">
        <?php if(isset($emailSent) && $emailSent == true) { ?>
        <span id="thanks">Thank you <?php echo $name;?>, your message has been sent.</span>
        <?php } ?>
    </form>
</div>
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 15 2010, 07:06 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Goes away if you don't make #feedback div 'position: relative'.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
gavsiu
post Aug 15 2010, 08:35 PM
Post #3





Group: Members
Posts: 4
Joined: 15-August 10
Member No.: 12,516
error spans in #feedback divs are absolutely positioned. without div position relative, the spans cannot be positioned.

the screenshot shows when the error spans kick in via javascript and php fallback.


Attached thumbnail(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 15 2010, 09:22 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Yeah. Something must end up on top of the borders, but I don't see what. Can you show us the real thing or at least paste the parsed PHP page in here?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
gavsiu
post Aug 15 2010, 09:25 PM
Post #5





Group: Members
Posts: 4
Joined: 15-August 10
Member No.: 12,516
the inline css is added by jquery plugins

CODE
    <form id="feedback" action="index.php#contact" method="post">

        <div class="error" id="name"><span style="opacity: 1; display: inline;" id="errorName" class="error">Minimum of 3 characters is required.</span>
            <label for="name">Name: </label>
            <input name="name" maxlength="64" required="required" value="" type="text">
        </div>
        <div class="error" id="email"><span style="opacity: 1; display: inline;" id="errorEmail" class="error">A valid e-mail address is required.</span>
            <label for="email">E-mail: </label>
            <input name="email" maxlength="254" required="required" value="" type="email">

        </div>
        <div class="error" id="subject"><span style="opacity: 1; display: inline;" id="errorSubject" class="error">Minimum of 5 characters is required.</span>
            <label for="subject">Subject: </label>
            <input name="subject" maxlength="128" required="required" value="" type="text">
        </div>
        <div class="error" id="message"><span style="opacity: 1; display: inline;" id="errorMessage" class="error">Minimum of 25 characters is required.</span>
            <label for="message">Message:</label>

            <br>
            <textarea name="message" maxlength="1024" required="required"></textarea>
        </div>
        <input id="send" name="send" value="Send Message" type="submit">
            </form>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 15 2010, 10:54 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
I don't know what causes it, but it seems to be a hasLayout bug.
http://www.satzansatz.de/cssd/onhavinglayout.html

For example adding 'width: 100%' to the #feedback div rule fixes it in IE6 (don't have 7).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
gavsiu
post Aug 20 2010, 12:28 AM
Post #7





Group: Members
Posts: 4
Joined: 15-August 10
Member No.: 12,516
I didn't get an email notification for the last reply, so I never checked back.

Just as I found a similar solution and was going to share, I realized you posted.

I found that giving #subject and #message "width: 904px;" fixes it in ie7 and ie6 and preserves the absolute positioning. Using 100% width on #feedback div will alter the absolute positioning.

You can use this website to test other browsers: http://spoon.net/browsers/

This post has been edited by gavsiu: Aug 20 2010, 12:29 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 20 2010, 01:06 AM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
I choose 100% because I as far as I could see #feedback div didn't have a width, which means it was 100% already.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 25th April 2024 - 06:13 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC