Win a copy of Micro Frontends in Action this week in the Server-Side JavaScript and NodeJS forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Paul Clapham
  • Bear Bibeault
  • Junilu Lacar
Sheriffs:
  • Jeanne Boyarsky
  • Tim Cooke
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • salvin francis
  • Frits Walraven
Bartenders:
  • Scott Selikoff
  • Piet Souris
  • Carey Brown

HTML page including image at top leaving blank space at top

 
Ranch Hand
Posts: 1670
9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I wrote a simple JSP page as below to include an image (for banner) at top.but blank space is coming at the top the top and as a result banner is not looking proper.

Please help me modify this simple code to remove space from the top.thanks

 
Marshal
Posts: 67451
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Use CSS to remove all margin and padding from the body element.
 
Monica Shiralkar
Ranch Hand
Posts: 1670
9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks.I tried the below but still the same issue. What do I have to use to remove margin from top?Please advice.

 
Bear Bibeault
Marshal
Posts: 67451
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
At no point did I say to add HTML attributes. I said:

Bear Bibeault wrote:Use CSS to remove all margin and padding from the body element.

 
Monica Shiralkar
Ranch Hand
Posts: 1670
9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Ok.Please tell the name of attribute I have to add as zero padding and zero margin.
 
Bear Bibeault
Marshal
Posts: 67451
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
No attributes. CSS.

Properties: padding and margin.

If you are going to be writing HTML, you need to know CSS. I suggest finding a good book or tutorial and get started learning it.
 
Monica Shiralkar
Ranch Hand
Posts: 1670
9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks.I'll go by your suggestion and practice CSS in free time. However I am have to complete my current application as soon as possible. The application is complete only thing is that top space is coming above the banner.I took it as a small issue but it has taken several hours of me to resolve. I will try the step you have said.
 
Bear Bibeault
Marshal
Posts: 67451
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Add the following to the head element:
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Images do not have a closing tag, they are self closing.
 
Bear Bibeault
Marshal
Posts: 67451
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Eric Pascarello wrote:Images do not have a closing tag, they are self closing.


Heh. Good catch. I didn't see that in all that badly formatted code.
 
Monica Shiralkar
Ranch Hand
Posts: 1670
9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks all. In case JSPpage1 includes JSPpage2 , and both have different css, which one will take precedence in the final JSP page rendered?
 
Bear Bibeault
Marshal
Posts: 67451
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Both. The browser could care less how the page was generated. It knows nothing of JSP.

The CSS will be applied according to the complex rules of CSS, which you'll need to look up.
 
Monica Shiralkar
Ranch Hand
Posts: 1670
9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I did exactly as you said. Still got space at the top.




As suggested by you. Still could not get past this issue.








 
author
Posts: 297
5
Android Firefox Browser Fedora
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
You have two line breaks (<br> elements) at the top of the <body>, these will add two lines of space. If you don't want that space, don't put the line breaks in.

Also you have an <img> and a <table> element inside the <head>, since the <head> is for content which isn't displayed it's unlikely to work the way you expect it to, it's also invalid HTML which may force browsers into some sort of quirks mode leading to yet more issues.
 
Monica Shiralkar
Ranch Hand
Posts: 1670
9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I did like that removed it from head and still getting space at top.






This might be a small issue but I am strugling and have wasted so much time on this. Help on this will be apreciated.

thanks
 
Bear Bibeault
Marshal
Posts: 67451
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Is this an HTML file or a JSP?

And why are you putting all that crap CSS on the image? It's the body I told you to set the margin and padding for.

And why is the style element not in the head?

And why aren't you using the HTML5 doctype?

That's all the questions for now.
 
Monica Shiralkar
Ranch Hand
Posts: 1670
9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
This is a JSP page.index.jsp

If put CSS for Body instead of Image then it will apply for all elements in body.I dont want that.I want it only for image because I dont want other elements style to be effected by this.

I have done the modifications as you suggested except for putting body because I dont want to effect other things in body by this style.
But still the same issue.
thanks

 
Bear Bibeault
Marshal
Posts: 67451
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Monica. Shiralkar wrote:If put CSS for Body instead of Image then it will apply for all elements in body.


You can listen to me or you can ignore me. If you don't listen, you will never solve your problem because the space is caused by the body. Period.

You can put any CSS you want on the image and it will not work.

I hope I have made things clear enough.

 
Monica Shiralkar
Ranch Hand
Posts: 1670
9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks a ton Bear. That worked perfectly. Its high time I practice css with sample projects.I was confused by the rules of css thinking if I write body there locatin of entire elements in body will get disturbed. Thanks again for your patience.
 
Monica Shiralkar
Ranch Hand
Posts: 1670
9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
It was resolved successfully using the suggestion but the most surprising thing is my image is in header (not body) and removing the margin padding of Body resolves it(when image is in header not body)
 
Bear Bibeault
Marshal
Posts: 67451
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
It is invalid to put an image tag in the head; and when you have invalid HTML there's no telling what will happen.

Always validate your HTML and fix and invalid constructs.
 
Or we might never have existed at all. Freaky. So we should cherish everything. Even this tiny ad:
Thread Boost feature
https://coderanch.com/t/674455/Thread-Boost-feature
reply
    Bookmark Topic Watch Topic
  • New Topic