function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Carson HuangCarson Huang 

Pageblock has a weird black line on the top side

Hi,

Here is my code sample

<apex:page showHeader="false">
	<style>
        html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        }
        #form-wrapper {
        width: 30%;
        position:absolute;
        left:35%;
        top:35%;
        padding: 0;
        }
    </style>
	<body id="body" style="background:-webkit-linear-gradient(top,rgb(137,150,160) 0%, rgb(255,255,255) 90%);">
        	<apex:form>
                <div id="form-wrapper">
                    <apex:pageBlock >
                        <apex:pageBlockSection columns="1" >
                            <apex:inputText label="Username" style="margin-left:45%"  />
                            <apex:inputSecret label="Password" style="margin-left:45%" />  
                            <apex:commandButton value="Login" style="margin-left:45%"/>
                        </apex:pageBlockSection>
                    </apex:pageBlock>
                </div>
        	</apex:form>
    </body>
</apex:page>

And this is what I see:

User-added image

Can someone explain to me what I am doing wrong? Thank you!
Best Answer chosen by Carson Huang
rohitsfdcrohitsfdc
This line is coming as you are using PageBlock in your code.
Try to override its css by inserting following code in style tags.

.bPageBlock {
border-top: 0px;

}

If that solves your prblem, please mark this as Best Answer.

Thanks
Rohit

All Answers

rohitsfdcrohitsfdc
This line is coming as you are using PageBlock in your code.
Try to override its css by inserting following code in style tags.

.bPageBlock {
border-top: 0px;

}

If that solves your prblem, please mark this as Best Answer.

Thanks
Rohit
This was selected as the best answer
dev_sfdc1dev_sfdc1
Hi Carson Huang,

Add this lines into your style tag to increase or decrease border-top-width: 1px;  then can be able to reduce it..

body .bPageBlock {
    border-top-width: 1px;
    margin-bottom: 10px;
    padding: 0;
}

Please let me know if this helps you..

Thank You